UI slider

Default

<script>
  $(function() {  $("#slider").slider();});
</script>
<div id="slider" class="e-uislider"></div>

                        <script>
                          $(function() {
                            $("#slider").slider();
                          });
                        </script>
                        <div id="slider" class="e-uislider"></div>

Variations

Range

<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>

Range with values

<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>

UI Slider

This is a jQuery UI Slider component skin.

Please check this link for the slider documentation: https://jqueryui.com/slider/

Last update

Message feat(doc): ui slider
Date:
()
Committer: Tamás Bíró
Component history