如何更改 jQuery UI 范围滑块宽度

Question

I have two range sliders ( slider1, slider2). What I want: when the user starts sliding with mouse on the slider1 then the position( or width) and the value to be same on the slider2 as slider 1.

My current code :

<p>
        <label for="amount">Distance</label>
        <input type="text" id="amount">
    </p>
<!--Range slider-->  
  <div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide'>

  </div>
  <p>
    <label for="amount2">Distance</label>
    <input type="text" id="amount2">
</p>
  <div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide2'>

  </div>

    <script>
         $( function() {
        $( "#slide" ).slider({
          range: 'min',
          min: 0,
          max: 5000,
          value: 0,
         
    });
    $( function() {
        $( "#slide2" ).slider({
          range: 'min',
          min: 0,
          max: 5000,
          value: 0,
    
        })
    
    });
    </script>

I know that I have to use the slide event, but I cant change the position of the slide2, thanks in advance

Answer 1

You can use slide event this will get called when user slide the slider then use slider("value") to get value and finally set value to both slider.

Demo Code :

 $(function() { $("#slide").slider({ range: 'min', min: 0, max: 5000, value: 0, }); $("#slide2").slider({ range: 'min', min: 0, max: 5000, value: 0 }); //on slide of slider call this $(".slides").on("slide", function() { var selection = $(this).slider("value"); //get value $(".slides").slider("value", selection); //set that value in both }); });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <p> <label for="amount">Distance</label> <input type="text" id="amount"> </p> <!-- Range slider 1 --> <div class="slides" id="slide"></div> <p> <label for="amount2">Distance</label> <input type="text" id="amount2"> </p> <!-- Range slider 2 --> <div class="slides" id="slide2"></div>