Jquery slider ui display values-CodePudding

What I need: 2 ui sliders that will update when 1 of the 2, change its value.(when you drag one, the other will, too)

Both of them go from 1 to 10. So far, if you drag one slider, the other will update with the same value.

What I need: To display both values (they are the same) next to its respective slider.

HTML

<div id="slider-1"></div>
<div id="slider-2"></div>
<div id="amount"></div>
<div id="amount2"></div>

const sliders = ['#slider-1', '#slider-2'].map(
  selector => $(selector).slider({
    min: 1,
    max: 10,
    step: 1
  })
);
sliders.forEach($el => {

  $el.on('slide', (_, {
    value
  }) => {
    sliders.forEach($slider => $slider.slider('value', value));
  });
});

$("#slider-1").slider({
  value: 1,
  slide: function(event, ui) {
    $("#amount").val(ui.value);
  }
});

https://jsfiddle.net/Lu0a4zfx/

CodePudding user response：

Try this js:

const sliders = ['#slider-1', '#slider-2'].map(
    selector => $(selector).slider({
        min: 1,
        max: 10,
        step: 1
    })
);
sliders.forEach($el => {

    $el.on('slide', (_, {
        value
    }) => {
        sliders.forEach($slider => $slider.slider({
            value: value,
            slide: function(event, ui) {
                $("#amount").text(value);
                $("#amount2").text(value);
            }
        }));
    });
});

CodePudding user response：

And this is a simple example with 3 line of jQuery

$('#MaxPopulation').on('change', function() {
  $('#something').text($(this).val());
});

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 30px;
  background: #2b5be2;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- This is an example -->

<input type="range" min="1" max="1000" value="100"  id="MaxPopulation">

<div id="something"></div>