The posted solutions are totally workable, but here is another solution that requires no additional plugins and produces this (see fiddle): Here’s how to do it: Initiate the slider. For each of the possible values, append a label element with position: absolute (the slider is already position: relative, so the labels will be positioned relative … Read more
To read slider value/percentage value at anytime: var val = $(‘#slider’).slider(“option”, “value”);
Try $slider = $(‘#slider’); $slider.slider(‘option’, ‘change’).call($slider); Not ideal but gets you working!
jQuery ui doesn’t have touch support. You should use it with jQuery-ui touch punch. Just add the script after jQuery ui: <script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script> <script src=”http://code.jquery.com/ui/1.8.21/jquery-ui.min.js”></script> <script src=”jquery.ui.touch-punch.min.js”></script> You can also use cdnjs: <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script> <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script> <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js”></script> Note: Better give this repo a star on Github.