<script>
$(function() { $("#slider").slider();});
</script>
<div id="slider" class="e-uislider"></div>
<script>
$(function() {
$("#slider").slider();
});
</script>
<div id="slider" class="e-uislider"></div>
<script>
$(function() { $("#rangeslider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] });});
</script>
<div id="rangeslider" class="e-uislider"></div>
<script>
$(function() {
$("#rangeslider").slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ]
});
});
</script>
<div id="rangeslider" class="e-uislider"></div>
<script>
$(function() { $("#rangesliderwithvalues").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function(event, ui) { $("#firstvalue").val(ui.values[0]); $("#secondvalue").val(ui.values[1]); } });});
</script>
<div class="e-field">
<div id="rangesliderwithvalues" class="e-uislider e-field"></div></div>
<div class="e-row e-row-condensed">
<div class="e-col-6">
<input id="firstvalue" type="number" value="75" class="e-input">
</div>
<div class="e-col-6">
<input id="secondvalue" type="number" value="300" class="e-input">
</div>
</div>
<script>
$(function() {
$("#rangesliderwithvalues").slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function(event, ui) {
$("#firstvalue").val(ui.values[0]);
$("#secondvalue").val(ui.values[1]);
}
});
});
</script>
<div class="e-field">
<div id="rangesliderwithvalues" class="e-uislider e-field"></div>
</div>
<div class="e-row e-row-condensed">
<div class="e-col-6">
<input id="firstvalue" type="number" value="75" class="e-input">
</div>
<div class="e-col-6">
<input id="secondvalue" type="number" value="300" class="e-input">
</div>
</div>