ProgramiCo
JavaScript Web Application Development
  • Home
  • SmartJs
    • Setting up the Environment
    • Running SmartJs
  • SmartJs Blog
  • About

KnockoutJs + jQueryMobile Slider

12/4/2012

3 Comments

 
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

Reply
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

Reply
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"

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    About the Author

    Picture
    Hugh Anderson is a web frontend developer in Tennessee who loves JavaScript and C#. 

    View my profile on LinkedIn

    Archives

    August 2015
    January 2013
    December 2012
    November 2012
    October 2012
    September 2012

    RSS Feed

Powered by Create your own unique website with customizable templates.