Chaning the value programmatically doesn't work

[kobelobster]

In the onInit method I'm calling the following peace of code

$slider.parent().find('input[type=range]').val($sliderVal['slider']).change();

However, the ranger is not chaning it's value.

/// This returns 1, so it should work
$slider.parent().find('input[type=range]').length 
// This returns 20 (not "20", simply 20)
console.log($sliderVal['slider']);

[andreruffert]

Hi @tzfrs! First of all what are you trying to achieve? It's not clear to me so far...

[kobelobster]

On your website you have this piece of code

I guessed this would be the code snippet I have to use to achieve this

http://andreruffert.github.io/rangeslider.js/#js-example-change-value

As you can see, I'm selecting the input with the type range, setting a value, and calling the change method. Shouldn't it change now programmatically? Or is it the wrong method I'm using?

If it is the wrong one I have a suggestion for your website: Would be cool if you have the code next to the examples for easier copying and less confusion.

[andreruffert]

K let's say you have a situation like this:

var $myElement = $('#myElement');

// initialize a rangeslider.js instance
$myElement.rangeslider({...});

and now you want to change the value:

$myElement.val(10).change();

// => should be `10` now
console.log($myElement[0].value);

I guess the problem is this:

In the onInit method I'm calling the following peace of code
$slider.parent().find('input[type=range]').val($sliderVal['slider']).change();

If you change the value of an element which gets initialized at the moment there could be some race conditions...

Why are you changing the value on initialization? Is there any reason for that?
I would set the value right before! Directly in the markup or with JS unless it's not possible otherwise.

[andreruffert]

Closing because of no feedback...

[kobelobster]

Sorry for the late answer!

The reason I want to change the value at initialization is the following: A user uses the slider and submits a form, then he comes back to the site. His choice however is saved in the session. Currently I'm reading this session and setting the value of the slider to the value he selected, however I thought there would be a way to do that with the rangeslider directly

[andreruffert]

The reason I want to change the value at initialization is the following: A user uses the slider and submits a form, then he comes back to the site. His choice however is saved in the session. Currently I'm reading this session and setting the value of the slider to the value he selected, however I thought there would be a way to do that with the rangeslider directly

There is a way of doing it directly with rangeslider.js but I would recommend to set the value from the session directly to the input e.g.

<input type="range" value="{{sessionValue}}">

[kobelobster]

Yep, that's what I'm currently doing. Was just wondering how it would work in a JS way. But I'm using the PHP solution now. Thanks anyway

[andreruffert]

Ok kewl you're welcome! ✌️