Slider Type 1

Слайдер

Для активного состояния:

<div class="ml-slider">
	<div data-slider></div>
</div>

Для неактивного состояния:

<div class="ml-slider">
	<div data-slider disabled="true"></div>
</div>

Расширенные настройки

Слайдер инициализируется автоматически (DOMContentLoaded) по атрибуту data-slider

    ml$("[data-slider]", function (el) {
        var slider = noUiSlider.create(el, {
            start: 15,
            connect: [true, false],
            range: {
                'min': 0,
                'max': 30
            }
        });
    });     

Документация

Slider Type 2

Слайдер со счетчиком

Для активного состояния:

<div class="ml-slider">
	<div class="ml-slider__val">Item number <span>20</span></div>
	<div data-slider></div>
	<div class="ml-slider__range">
		<span class="ml-slider__range-min">0</span>
		<span class="ml-slider__range-max">30</span>
	</div>
</div>

Для неактивного состояния:

<div class="ml-slider">
	<div class="ml-slider__val">Item number <span>20</span></div>
	<div data-slider disabled="true"></div>
	<div class="ml-slider__range">
		<span class="ml-slider__range-min">0</span>
		<span class="ml-slider__range-max">30</span>
	</div>
</div>

Расширенные настройки

Слайдер инициализируется автоматически (DOMContentLoaded) по атрибуту data-slider

    ml$("[data-slider]", function (el) {
        var slider = noUiSlider.create(el, {
            start: 15,
            connect: [true, false],
            range: {
                'min': 0,
                'max': 30
            }
        });
        var prev = el.previousElementSibling;
        var inp = el.parentNode.getElementsByClassName("ml-slider__input")[0];
        el.noUiSlider.on('update', function (val) {
            if (prev) {
                prev.getElementsByTagName("span")[0].innerHTML = Math.round(val)
            }
            if (inp) {
                inp.value = Math.round(val)
            }
        });
        if (inp) {
            inp.addEventListener('keyup', function () {
                el.noUiSlider.set(this.value);
            });
        }
    });

Документация

Slider Type 3

Слайдер с вводом

Для активного состояния:

<div class="ml-slider">
	<div data-slider></div>
	<input class="ml-slider__input" value="15">
</div>

Для неактивного состояния:

<div class="ml-slider">
	<div data-slider disabled="true"></div>
	<input class="ml-slider__input" value="15">
</div>

Расширенные настройки

Слайдер инициализируется автоматически (DOMContentLoaded) по атрибуту data-slider

    ml$("[data-slider]", function (el) {
        var slider = noUiSlider.create(el, {
            start: 15,
            connect: [true, false],
            range: {
                'min': 0,
                'max': 30
            }
        });
        var prev = el.previousElementSibling;
        var inp = el.parentNode.getElementsByClassName("ml-slider__input")[0];
        el.noUiSlider.on('update', function (val) {
            if (prev) {
                prev.getElementsByTagName("span")[0].innerHTML = Math.round(val)
            }
            if (inp) {
                inp.value = Math.round(val)
            }
        });
        if (inp) {
            inp.addEventListener('keyup', function () {
                el.noUiSlider.set(this.value);
            });
        }
    });

Документация

Slider Type 4

Слайдер - с шагами

Для активного состояния:

<div class="ml-slider">
	<div data-slider-step></div>
	<div class="ml-slider__steps">
		<span data-slider-step-val="1">One</span>
		<span data-slider-step-val="2" class="is-active">Two</span>
		<span data-slider-step-val="3">Three</span>
	</div>
</div>

Для неактивного состояния:

<div class="ml-slider">
	<div data-slider-step disabled="true"></div>
	<div class="ml-slider__steps">
		<span data-slider-step-val="1">One</span>
		<span data-slider-step-val="2" class="is-active">Two</span>
		<span data-slider-step-val="3">Three</span>
	</div>
</div>

Расширенные настройки

Слайдер инициализируется автоматически (DOMContentLoaded) по атрибуту data-slider

    ml$("[data-slider-step]", function (el) {
        var slider = noUiSlider.create(el, {
            start: 2,
            connect: [true, false],
            step: 1,
            range: {
                'min': 1,
                'max': 3
            }
        });

        var steps = el.nextElementSibling;
        steps.addEventListener("click", function (e) {
            var target = e.target;
            if (target.tagName !== 'SPAN') return;
            var sld = slider.target;
            var sbl = mlGetSiblings(e.target);
            var index = target.dataset.sliderStepVal;
            for (var key in sbl) {
                sbl[key].classList.remove("is-active")
            }
            target.classList.add("is-active");
            sld.noUiSlider.set(index);
        });

        slider.target.noUiSlider.on('change', function (val) {
            var pos = Math.round(val);
            var target = steps.getElementsByTagName("span");
            for (var i = 0; i < target.length; i++) {
                target[i].classList.remove("is-active");
            }
            target[pos - 1].classList.add("is-active");
        });
    });

Документация npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-slider] (https://www.npmjs.com/package/@megalabs/ml-slider)

Для установки пакета

• npm i @megalabs/ml-slider
• затем в папке @megalabs/ml-slider запускаем npm install
• npm start

Расширенные настройки

В компоненте используется библиотека noUiSlider

https://github.com/leongersen/noUiSlider