Question

Started looking at the API for the slider, getting a little confused. I have a simple form, with one input, feeding into a “results” page that contains a slider. When the user slides the slider handle, the value changes (meaning the final value is computed in a function – input is added to a number)

Right now, I have the value of the slider hard coded, but I’d like the value to be the actual value from the original forms input. Not sure how to get that done, but here’s the function I am working with:

$(function() {
    $("#ds1").slider({
        orientation: "horizontal",
        step: 7,
        range: "min",
        max: 200,
        value: 50,
        slide: refreshTotal,
        change: refreshTotal
    });
});

So the value is hard coded to 50, but I’d like an input field to control that value. The refreshTotal function handles the actual computation. It would be great to also set the max value too if that is handled the same way as this.

I’ve searched on here and found a few examples of “real time” input’s affecting the slider, and visa versa using keyup, etc. But I can’t figure out how to set the value (perhaps using a getter), based on the form input field after the user hits submit, and JQuery handles the computation.

I think this is a pretty simple thing, just can’t seem to figure it out.

Answer 1

This assumes jQuery & jQuery UI.

$(function () {
    var $slider = $('#slider').slider();
    var $input_a = $('#input_a');

    // Set slider value
    $input_a.on('keyup', function () {
        $slider.value($(this).val());

    // Default slider
    }).trigger('keyup');

    // Set input value
    $slider.change(function () {
        $input_a.val($(this).value());
    };
});