How to get more datapoints in jQuery slider?

Question

I am using jQuery 1.7.3 and jQuery UI 1.9.1.

I am using the jQuery range slider (http://jqueryui.com/slider/#range). I have several sliders set up on the page that work really well and some that work really poorly. My thought is that jQuery doesn't know exactly how to create the right data points to make them run smoothly, or there are not enough data points between the low and high numbers.

These ranges slide really well because they slide smoothly:

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

These ranges slide really poorly, because they slide are jerky:

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

Is there any way to defined the number of data points that a slider should have? Is there any way to create a smoother slider? I have found no documentation to help with this.

You should post to jsfiddle. http://jsfiddle.net/ I'd be interested to see how well this works on that site. — Nick Vaccaro, Nov 14 '12 at 19:15

score 1 · Accepted Answer · answered Nov 19 '12 at 13:45

I had encountered a similar problem where I had to create a smooth slider and I did the following to make the slider look very smooth (an implementation here - see the quarter / annual slider)

Very small step value (I used a value of 0.0025, while the each step desired value was 1 unit)
Assign a function to the slide and/or change event of the slider. This function would translate the actual value of slider (in multiples of 0.0025) to the step value that we desire (1,2,3 etc) and use for any computations
Assign a function to the stop event of the slider which slides the slider to the required value (1,2,3 etc) from the current value of slider.

Example

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

I have not tested the above codes, but you should get the idea

I think the important thing that you pointed out is the STEP property. I am not using it. I will give that a try right away. Thanks! — Evik James, Nov 19 '12 at 13:52
ahh!!, i thought you wanted a really smooth slider. The above code will help when STEP is also not smooth enough. Anycase, glad it helped :) — Konstant, Nov 19 '12 at 14:05
Yes, I DO want the smooth slider. It seems that step would be absolutely necessary when using small numbers. I will let you know after I have tried it. — Evik James, Nov 19 '12 at 14:08

How to get more datapoints in jQuery slider?

1 Answers1