Search code examples
jqueryjquery-mobilerangerangeslider

Jquery mobile custom only range slider

I am trying to integrate custom jquery mobile only for range slider option for 1.4.5 version with jquery-1.11.1. The custom jquery mobile i build it from https://jquerymobile.com/download-builder/ when I choose only range slider option button (also added predefined dependencies choices) but when i replace

<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

with the bellow

<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
<script src='jquery.mobile.custom.js'></script>
<script src='jquery.mobile.custom.min.js'></script>

doesn' respond properly the range slider. (Css works for both cases that' s why I didn't mention it.)

Solution

  • I figured out that if you want to use custom range slider from JQM and its dependencies by initialize the widget like:

    1. You should define the instance of range slider in order to be customized as a JQM object on your page by $( "div#range-slide-id" ).rangeslider();

    2. You should declare the class manually on <div data-role="rangeslider" class="col-md-6 ui-page-theme-a" id='range-slide-id'> in order to get the CSS.

    If you don't use widgets from the overall JQM page, there is no auto-initialization of the widgets, because it is part of another component that is not available for custom JQM.

    P.S. Also, you should be careful not to have loaded another version of jQuery library that may be conflicted with this version.