KnockoutJs + jQueryMobile Slider

12/4/2012

I have been having some struggle with the jQuery Mobile slider. It is kind of non-standard in the way that it removes the original Range input from the DOM and replaces it with its own. The one it inserts in has the same ID as the removed one. It's actually really tricky to get 2 way binding to work with the jQuery Mobile Slider and Knockout. After scouring the interwebs for advice on jQuery Mobile Slider + Knockout Js, I ended up creating my own custom Knockout binding to wire up the 2 way binding.

Hide the Numeric input, okay?

Okay. We got a nice slider and the normal old text input is still left next to it. So just add this CSS to your style sheet, prefixing with the appropriate container if you want to be more specific.

3 Comments

Stephan Froede

1/6/2013 12:34:12 am

Hugh,

great, but...there is something odd with the solution, I am using 10 sliders at a page.

After using the first slider, the first slider always moves if any other slider is used.

They are paired. But this only happens with the first slider, using the second slider first does not have this effect.

Furthermore, Safari states that:

Error: cannot call methods on slider prior to initialization; attempted to call method 'refresh' in jquery-1.8.2.min.js:2

It seems that the wiring has some side effects.

But your solution works quite good.

Regards,
Stephan

Hugh link

1/7/2013 07:20:18 am

Hi Stephan, I have created a Fiddle that demonstrates multiple Sliders using the bindingHandler.
http://jsfiddle.net/HugeHugh/nnNJZ/
Hope that helps!
Hugh

zewa

3/24/2013 06:14:10 pm

to hide the textbox u could simply use following class inside the label:

class="ui-hidden-accessible"

Your comment will be posted after it is approved.

KnockoutJs + jQueryMobile Slider

Hide the Numeric input, okay?

Leave a Reply.

About the Author

Archives