CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-slider
user765368
user765368

Reputation: 20346

cannot refer to slider using $(this) inside $().slider({})?

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

Upvotes: 0

Views: 314

Answers (3)

voigtan
voigtan

Reputation: 9031

Based on @ShankarSangoli post:

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

you take each .mySlider and add the plugin and store it as $slider to get its value.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

Upvotes: 2

Justin
Justin

Reputation: 695

@ShankarSangoli's answer does address how to fix it, but I think you asked why.

To answer the question of why this doesn't refer to the slider, take a look at how you're constructing that function call.

$(".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...
    }
});

But let's replace the names and details with simpler things:

object.method({
    value: this.function().otherFunction()...;
});

This is the same as

var params = {
    value: this.function().otherFunction()...;
};
object.method(params);

As was already pointed out, this doesn't refer to the slider object, so you need to create a reference to the slider first. this refers to the most recent enclosing scope -- in this case, it's anonymous object {} you're creating to pass in parameters for the .slider method call.

Hope that helps.

Upvotes: 0

Related Questions