Jquery滑块ui显示值

Question

我需要的是:2个ui滑块，当2中的1更新时，改变它的值。(当你拖动一个，另一个也会)

它们都从1到10。到目前为止，如果拖动一个滑块，另一个将使用相同的值更新。

我需要的是:在各自的滑块旁边显示两个值(它们是相同的)。

HTML

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

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));
  });
});

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

https://jsfiddle.net/Lu0a4zfx/

Answer 1

试试这个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);
            }
        }));
    });
});

​

Answer 2

这是一个简单的例子，有3行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" class="slider" id="MaxPopulation">

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

​