使jQuery Slider Update元素成为'他在动

Make jQuery Slider Update element as it's moving

本文关键字：Slider jQuery Update 元素      更新时间：2023-09-26

我希望我的jQuery滑块在用户移动滑块时动态更新上面的数字。现在，上面的数字只有在滑块移动完成后才会改变。

这是我的代码：

HTML>

        <div class="row">
            <div class="large-6 columns">
                <div id="amount-money" class="slider-text left">$120000</div>
                <div id="amount-money-2" class="slider-text right">$10000000</div>
            </div>
            <div class="large-6 columns">
                <div id="amount-bath" class="slider-text left">1 Bathroom</div>
                <div id="amount-bath-2" class="slider-text right">4 Bathroom</div>
            </div>
        </div>
        <div class="row">
            <div class="large-6 columns">
                <div class="slider-wrapper">
                    <div class="slider costSlider"></div>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="slider-wrapper">
                    <div class="slider bathSlider"></div>
                </div>
            </div>
        </div>

Javascript>

  // creating sliders for search
  $( ".costSlider" ).slider({
    range: true,
    min: 120000,
    max: 10000000,
    values: [ 120000, 10000000 ],
  });
  $( ".bathSlider" ).slider({
    range: true,
    min: 0,
    max: 5,
    values: [ 1, 4 ],
  });
  $( ".costSlider" ).on( "slidechange", function( event, ui ){
    console.log(ui.values);
    $( "#amount-money" ).replaceWith('<div id="amount-money" class="slider-text left"> $' + ui.values[0]);
    $( "#amount-money-2" ).replaceWith('<div id="amount-money-2" class="slider-text right"> $' + ui.values[1]);
  });
  $( ".bathSlider" ).on( "slidechange", function( event, ui ){
    $( "#amount-bath" ).replaceWith('<div id="amount-bath" class="slider-text left">' + ui.values[0] + ' Bathroom');
    $( "#amount-bath-2" ).replaceWith('<div id="amount-bath-2" class="slider-text right"> ' + ui.values[1] + ' Bathroom');
  });

您应该能够利用slide事件。

$( ".costSlider" ).on( "slide", function( event, ui ) {} );

哪个是（重点是我的）。。。

在滑动过程中每次鼠标移动时触发。中提供的值事件ui.value表示句柄作为当前运动的结果。取消活动将阻止手柄停止移动，手柄将继续保持以前的状态价值

相关文章：