Slider

The slider is used as an interaction component on the recycle process page. It uses the general input rage component with some specific styling for Bebat. Some Javascript is used for extra styling on the filled green bar.

Default

px 

			
				<div class="m-slider js-m-slider ">
	<div class="m-slider__image-container">
		<img class="m-slider__image is-active" src="/assets/images/slider/13-bril.jpg" alt="13-bril" title="13-bril" data-number="13" />
		<img class="m-slider__image" src="/assets/images/slider/120-gieter.jpg" alt="120-gieter" title="120-gieter" data-number="120" />
		<img class="m-slider__image" src="/assets/images/slider/148-wekker.jpg" alt="148-wekker" title="148-wekker" data-number="148" />
		<img class="m-slider__image" src="/assets/images/slider/297-pot.jpg" alt="297-pot" title="297-pot" data-number="297" />
		<img class="m-slider__image" src="/assets/images/slider/1400-step.jpg" alt="1400-step" title="1400-step" data-number="1400" />
		<img class="m-slider__image" src="/assets/images/slider/2500-kruiwagen.jpg" alt="2500-kruiwagen" title="2500-kruiwagen" data-number="2500" />
	</div>
	<div class="m-slider__range">
		<div class="m-slider__container">
			<input class="m-slider__input" type="range" min="0" max="5" name="slider" id="slider" value="0" />
			<div class="m-slider__inner">
				<span class="m-slider__active"></span>
			</div>
			<span class="m-slider__icon icon-battery"></span>
		</div>
		<div class="m-slider__value">
			<span class="m-slider__number">0</span>
			<span class="m-slider__unit">batterijen</span>
		</div>
	</div>
</div>

Documentation

JavaScript

  • js-m-slider

    this is needed to have the default behaviour of a slider and to change the images above the slider.