I am creating a touch-capable price range-slider using jquery's rangeslider widget seen here: http://api.jquerymobile.com/rangeslider/#entry-examples
(Note: I've found a lot of documentation on using jQuery's slider widget but not rangeslider widget).
Here is working example: http://jsfiddle.net/E7xYc/1/
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="../libraries/js/jquery.mobile.custom/jquery.mobile.custom.js"></script>
<link rel="stylesheet" href="../libraries/js/jquery.mobile.custom/jquery.mobile.custom.structure.css" />
<link rel="stylesheet" href="../libraries/js/jquery.mobile.custom/jquery.mobile.custom.theme.css" />
</head>
<body>
<div data-role="rangeslider">
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
</body>
</html>
I've spent hours reading documentation and looking for examples but I can't seem to dynamically set the min,max,and value(s) of the rangeslider.
So.. I moved past dynamically setting values and attempted to bind and onChange event to the rangeSlider and pass the values in a function. I pull this off, but it's really hacky and I know I'm over complicating this.
Thanks for any help, world. Ugh.