0

我正在使用 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

有什么方法可以定义滑块应具有的数据点数量吗？有什么方法可以创建更平滑的滑块吗？我没有找到可以帮助解决此问题的文档。

4

1 回答 1

1

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

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

我没有测试过上面的代码，但你应该明白了

于 2012-11-19T13:45:27.367 回答