不同范围的滑动距离

Posted 2023-05-08

【中文标题】不同范围的滑动距离

【英文标题】：Different range slide distances

【发布时间】：2016-12-22 16:09:55

【问题描述】：

我正在使用 jQuery UI Slider（从最小值到最大值）并且需要达到这个结果：

|------------------------.---------| 0 300 500

从 0 到 300 我的步长值为 1，幻灯片宽度为 70%，从 300 到 500（70% 到 100%）步长为 25。我知道如何动态更改步长，问题是宽度不同（距离）。如何使 0-300 覆盖 70% 的滑块和 300-500 仅从 70% 到 100%？提前致谢。

【参考方案1】：

在滑动动作时从左侧检查手柄位置。还没有检查过，但这个想法可能有效

$( "#your-slider" ).on( "slide", function( event, ui ) 

    var handler_pos = $( '.ui-slider-handle' ).position().left;
    var slider_width = $( '#your-slider' ).width();
    var count = handler_pos/slider_width*100;

    if ( count > 70 ) 
        $( '#your-slider' ).slider( 'option', 'step', 25 );
     else 
        $( '#your-slider' ).slider( 'option', 'step', 1 );
    

);