Question

let’s say I have a jQuery UI Slider like so:

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

Let’s say I have a dynamic input text next to my slider to show the value of my slider like so:

<input id="slider-value" type="text" value="7" style="text-align: center;">

So the full code for my slider is:

<p>
<div id="slider-value" class="mySlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<input id="slider-value" type="text" value="7" style="text-align: center;">
</p>

As you can see, initially, when the page loads, my slider has a value of 7. Also, the input text that shows the value of my slider has the same id than my slider div itself. I want the handle of the slider to show that value on page load. If I set the value attribute of the slider equal to 7 like so:

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: 7, // value of the slider handle
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

This works fine, but obviously, this is not the best way to go because the value of the slider is retrieved from a database and could change (it could be 1, 8, 4, 6, etc…).

Now if I try to do something like:

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

For some reason, this does not work. The handle does not show the value. What am I doing wrong?, Is it because I cannot use $(this) inside $().slider({}) ?

Please let me know anybody why this isn’t working

Thank you

Answer 1

What is this here? Don’t think it will point to .mySlider because you are just creating a config and sending it as argument to slider plugin, slider is not yet initialized. Try this.

var $mySlider = $(".mySlider");
$mySlider.slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $mySlider.next('input').val(),
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

As a side not ids must be unique of the page. You can use val() method to get the value from input element instead of using attr("value").

Edited my answer based on your edit(added markup). Used next() method to find the immediate input(sibling) of .mySlider and get the value.

Update: For multiple sliders use this code

$(".mySlider").each(function(){
    var $this = $(this);
    $this.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $this.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});