How to load multiple sliders handling between 2 va

Question

I'm stuck.. I want to create multiple range sliders with noUiSlider. Each slider has to handle between to values [0,100]; (min=0, max=100,). Moreover i need a output and input of values by handler and entered by User.

See my current code here:

		function data ( element, key ) {
			return element.getAttribute('data-' + key);   
		}
		
		var connectSlider = document.getElementsByClassName('slider'); 
		var input0 = document.getElementsByClassName('input-format-0');
		var input1 = document.getElementsByClassName('input-format-1');
		var inputs = [input0, input1];
		
		function createSlider ( slider ) {
			
				noUiSlider.create( connectSlider,{
					start: [0, 100],
					connect: false,
					step: Number(data(slider, 'step')) || 1,
					range: {
						'min': [0],
						'max': [100],
					},
					tooltips: true,
					connect: true,
					format: {
						to: function (value) {
							return value + '%';
						},
						from: function (value) {
							return value.replace('%', '');
						},
					}
				});
		}
		connectSlider.noUiSlider.on('update', function( values, handle ) {
			inputs[handle].value = values[handle];
		});
		
		Array.prototype.forEach.call(document.querySelectorAll('.slider'), createSlider); 

	

		function setSliderHandle(i, value) {
			var r = [null,null];
			r[i] = value;
			connectSlider.noUiSlider.set(r);
		}

		// Listen to keydown events on the input field.
		inputs.forEach(function(input, handle) {

			input.addEventListener('change', function(){
				setSliderHandle(handle, this.value);
			});

			input.addEventListener('keydown', function( e ) {

				var values = connectSlider.noUiSlider.get();
				var value = Number(values[handle]);

				// [[handle0_down, handle0_up], [handle1_down, handle1_up]]
				var steps = connectSlider.noUiSlider.steps();

				// [down, up]
				var step = steps[handle];

				var position;

				// 13 is enter,
				// 38 is key up,
				// 40 is key down.
				switch ( e.which ) {

					case 13:
						setSliderHandle(handle, this.value);
						break;

					case 38:

						// Get step to go increase slider value (up)
						position = step[1];

						// false = no step is set
						if ( position === false ) {
							position = 1;
						}

						// null = edge of slider
						if ( position !== null ) {
							setSliderHandle(handle, value + position);
						}

						break;

					case 40:

						position = step[0];

						if ( position === false ) {
							position = 1;
						}

						if ( position !== null ) {
							setSliderHandle(handle, value - position);
						}

						break;
				}
			});
		});

  
  
  
  

<link href="https://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet"/>
<script src="https://refreshless.com/noUiSlider/distribute/nouislider.js"></script>

						<div class="rangefilter">
							<div class="slider"></div>
							<ul>
								<li class="left"><input class="input-format-0" type="text"></li>
								<li class="right"><input class="input-format-1" type="text"></li>
							</ul>
						</div>

Would be really nice if somebody could help me. Thank's. Best regards.

Answer 1

Faced a similar problem. Spent 3 days on the solution. The solution is not optimal. But now this is the best I can offer.

HTML:

<div class="custom-range-slider">

  <span class="custom-range-slider__input-text">from</span>
  <input class="custom-range-slider__input custom-range-slider__input--from" type="number">

  <span class="custom-range-slider__input-text">to</span>
  <input class="custom-range-slider__input custom-range-slider__input--to" type="number">

  <div class="custom-range-slider__track"></div>
</div>

<br>
<br>
<br>

<div class="custom-range-slider">

  <span class="custom-range-slider__input-text">from</span>
  <input class="custom-range-slider__input custom-range-slider__input--from" type="number">

  <span class="custom-range-slider__input-text">to</span>
  <input class="custom-range-slider__input custom-range-slider__input--to" type="number">

  <div class="custom-range-slider__track"></div>
</div>

<br>
<br>
<br>

<div class="custom-range-slider">

  <span class="custom-range-slider__input-text">from</span>
  <input class="custom-range-slider__input custom-range-slider__input--from" type="number">

  <span class="custom-range-slider__input-text">to</span>
  <input class="custom-range-slider__input custom-range-slider__input--to" type="number">

  <div class="custom-range-slider__track"></div>
</div>

JS:

var rangeSlidersTrack = document.querySelectorAll('.custom-range-slider .custom-range-slider__track');
var rangeSlidersInputFrom = document.querySelectorAll('.custom-range-slider .custom-range-slider__input--from');
var rangeSlidersInputTo = document.querySelectorAll('.custom-range-slider .custom-range-slider__input--to');
var rangeSliderInputs = [];

for(var i = 0; i < rangeSlidersTrack.length; i++) {
    rangeSliderInputs.push([rangeSlidersInputFrom[i], rangeSlidersInputTo[i]]);
}

[].slice.call(rangeSlidersTrack).forEach(function(slider, index) {
    noUiSlider.create(slider, {
        start: [0, 500],
        connect: true,
        range: {
            'min': 0,
            'max': 500
        }
    }).on('update', function(values, handle) {
        rangeSliderInputs[index][handle].value = parseInt(values[handle]);
    });

    function setSliderHandle(i, value) {
        var r = [null,null];
        r[i] = value;
        slider.noUiSlider.set(r);
    }

    rangeSliderInputs[index].forEach(function(input, handle) {

        input.addEventListener('change', function(){
            setSliderHandle(handle, this.value);
        });

        input.addEventListener('keydown', function(e) {

            var values = slider.noUiSlider.get();
            var value = Number(values[handle]);

            // [[handle0_down, handle0_up], [handle1_down, handle1_up]]
            var steps = slider.noUiSlider.steps();

            // [down, up]
            var step = steps[handle];

            var position;

            // 13 is enter,
            // 38 is key up,
            // 40 is key down.
            switch (e.which) {

                case 13:
                    setSliderHandle(handle, this.value);
                    break;

                case 38:

                    // Get step to go increase slider value (up)
                    position = step[1];

                    // false = no step is set
                    if ( position === false ) {
                        position = 1;
                    }

                    // null = edge of slider
                    if ( position !== null ) {
                        setSliderHandle(handle, value + position);
                    }

                    break;

                case 40:

                    position = step[0];

                    if ( position === false ) {
                        position = 1;
                    }

                    if ( position !== null ) {
                        setSliderHandle(handle, value - position);
                    }

                    break;
            }
        });

    });

});

Fiddle