如何在jQuery滑块中获取更多数据点？

Question

我正在使用jQuery 1.7.3和jQuery UI 1.9.1。

我正在使用jQuery范围滑块（http://jqueryui.com/slider/#range）。我在页面上设置了几个滑块，它们工作得非常好，而且有些滑块工作效果很差。我的想法是，jQuery并不确切知道如何创建正确的数据点以使它们平稳运行，或者低数字和高数字之间没有足够的数据点。

这些范围滑得非常好，因为它们可以顺利滑动：

Impedance 50ohm - 64ohm
Width 1.4in - 5.8in
Cable length 300cm - 1500cm
Cable length 2ft - 250ft
Depth 6.392in - 12.5in
Depth 161mm - 318mm

这些范围滑得非常差，因为它们滑动是生涩的：

Shipping Weight 0.2kg - 2.2kg
Depth 0.9in - 1.16in
Shipping Weight 1lbs - 2lbs
Shipping Weight 0.008kg - 0.5kg

有没有办法定义滑块应该具有的数据点数？有没有办法创建更流畅的滑块？我没有找到任何文档来帮助解决这个问题。

Answer 1

我遇到了类似的问题，我必须创建一个平滑的滑块，我做了以下操作，使滑块看起来非常流畅（实现here - 请参阅季度/年度滑块）

1. 非常小的步长值（我使用的值为0.0025，而每个步骤所需的值为1个单位）
2. 为幻灯片分配功能和/或更改滑块的事件。此函数会将滑块的实际值（以0.0025的倍数）转换为我们所需的步长值（1,2,3等）并用于任何计算
3. 为滑块的停止事件指定一个函数，该滑块将滑块滑动到滑块当前值所需的值（1,2,3等）。

示例

// Slider init 
$('#my-slider').slider({
    value : 6,
    min : 1,
    max : 6,
    animate : true,
    step : 0.0025,
    slide : slide_fn,
    change : slide_fn,
    stop : stop_fn,
});

// Slide function
function slide_fn(e, ui) {
    var value = get_desired_value(ui.value);
    // Do your stuff
}

// Stop function
function stop_fn(e, ui) {
    var value = get_desired_value(ui.value);
    // slide to the desired value
    setTimeout(function() {
        $("#my-slider").slider("value" , value);
    }, 300);
}

// get desired value - can be modified as per your requirements
// idea here is to assign anything between 0.5 to 1.5 to value 1, 1.5 to 2.5 to 2 and so on 
function get_desired_value(ui_value) {
    var float_value = parseInt(parseFloat(ui_value) * 1000) / 1000;
    var int_value = parseInt(float_value);
    if (float_value > int_value - 0.5 && float_value <= int_value + 0.5) {
        return int_value;
    } else if (float_value > int_value + 0.5) {
        return (int_value + 1);
    }
}

我没有测试过上面的代码，但你应该明白这个想法