<script src="//code.jquery.com/jquery-3.0.0-alpha1.min.js"></script>
<script src="//jquery-element.github.io/jquery-element-2.0.0.js"></script>
<script src="//jquery-element.github.io/cuteslider-2.2.0.js"></script>
<input class="lorem" type="range"
min="0" value="5" max="10" step="0.1"
data-jquery-element="cuteslider"
/>To make it vertical just add the attribute data-cuteslider-vertical, like:
<input class="lorem" type="range"
min="0" value="5" max="10" step="0.1"
data-jquery-element="cuteslider"
data-cuteslider-vertical
/>The attributes min, max, value, step, data-cuteslider-vertical can be modified by doing:
$( "input.lorem" ).attr({
min: 0,
max: 250,
value: 0
})and the element will be synchronized automatically.