JQUERY MOBILE SLIDER

[akelmj]

Hi,

How to bind multirange slider:

js code:

var items = [{range:[2:20]}];

// get the array index value to use in the slider
rivets.formatters.index = function (arr, index) {
  return arr[index];
};

rivets.bind($('body'), { item : items[0] });

the html code:

<div data-role="rangeslider">
  <label for="range-10a">Rangeslider:</label>
  <input type="range" name="range-10a" id="range-10a" min="0" max="100" step="1" rv-value="item.range | index 0">
  <label for="range-10b">Rangeslider:</label>
  <input type="range" name="range-10b" id="range-10b" min="0" max="100" step="1" rv-value="item.range | index 1">
</div>

the problem: after running the code the slider show zero.

thanks.

[akelmj]

any help???

[Duder-onomy]

First pass, This is not the code your actually using right?

Thats not js?

var items = [{range:[2:20]}];

[akelmj]

this is JSON array items = [ {name:"a",range:[2:20]}, {name:"b",range:[1:5]}, {name:"c",range:[10:200]} ];

so i can call items[0].range to get the first range in the array.

[Duder-onomy]

I think you meant to use a comma in your range. But here is a JS fiddle? Can you reproduce your error in here?

http://jsfiddle.net/a4exbj8y/

[akelmj]

yes you are right

items = [ {name:"a",range:[2,20]}, {name:"b",range:[1,5]}, {name:"c",range:[10,200]} ]

but when you choose Jquery mobile it's not work properly

[akelmj]

http://jsfiddle.net/a4exbj8y/1/

[Duder-onomy]

This one works as intended, http://jsfiddle.net/a4exbj8y/5/ I riveted the min and max attributes and called refresh on the jquery-ui widget after binding.

Not sure if it will work in your case as you will need to call refresh on the slider.

When we use rivets and jquery-ui together, we manually initialize the jquery-ui widget AFTER we rivet the dom. Allot of plugins and libraries will blow out / not respect the riveting if you rivet after you jquery-ui it. So, if you are running into this problem now, be prepared for it to happen ALLOT.

The fix is almost always (in my experience) to rivets.bind() the dom BEFORE you do anything else to it.

[akelmj]

thanks, work great