Semantic UI Range Slider

by giddygeek

HTML

<link rel="stylesheet" href="https://rawgit.com/gdaunton/Semantic-UI/range-slider-build/dist/semantic.css">
<script src="https://rawgit.com/gdaunton/Semantic-UI/range-slider-build/dist/semantic.js"></script>
<div class="ui container">
  <h1>SUI popup</h1>
  <div href="" class="ui red button js_popup">Show popup (open developer console beforehand)</div>
  <div class="ui flowing popup transition hidden">
    <div class="ui padded basic segment">
      <h4 class="ui disabled header">
        Popup!
      </h4>
    </div>
  </div>

  <br>
  <h1>Semantic UI Range</h1>

  <div class="ui segment">
    <div class="ui range"></div>
    <p>Smooth</p>
     <div class="ui range" id="smooth"></div>
  </div>

  <div class="ui segment">
    <div id="double" class="ui double range"></div>
    <p id="display-d"></p>
  </div>

  <h2>Vertical</h2>
  <div class="ui segment" style="display: flex; height: 30em;">
    <div class="ui vertical range"></div>
    <div class="ui vertical hover labeled range"></div>
    <div class="ui vertical reversed range"></div>
    <div class="ui small vertical range"></div>
    <div class="ui large vertical range"></div>
    <div class="ui big vertical range"></div>
    <div class="ui double vertical range"></div>
  </div>

  <h2>Labeled</h2>
  <div class="ui segment">
    <div class="ui labeled range" id="range-0"></div>
    <div class="ui labeled range"></div>
  </div>

  <h2>Custom Labeled</h2>
  <div class="ui segment">
    <div class="ui labeled range" id="range-0">
      <ul class="labels">
        <li class="label">
          <</li>
            <li class="label">=</li>
            <li class="label">></li>
      </ul>
    </div>
  </div>

  <h2>Undefined Step</h2>
  <div class="ui segment">
    <div id="range-1" class="ui range"></div>
    <p id="display-1"></p>
  </div>

  <h2>Or use a custom callback</h2>
  <div class="ui segment">
    <div class="ui range" id="range-3"></div>
    <br> Value: <span id="display-3"></span>
  </div>

  <h2>Set...

JavaScript

$(document).ready(function() {
  // Semantic UI popup
  $('.js_popup')
    .popup({
      on : 'click'
    });


  // Semantic UI Range
  $('.ui.range').range({
    min: 0,
    max: 10,
    start: 5,
    step: 1,
  });

  $('#smooth').range({
    min: 0,
    max: 10,
    start: 5,
    smooth: true,
  });

  $('#double').range({
    min: 0,
    max: 10,
    start: 5,
    step: 1,
    verbose: true,
    debug: true,
    onChange: function(value) {
      var
        $self = $(this),
        firstVal = $self.range('get thumb value'),
        secVal = $self.range('get thumb value', 'second');
      $('#display-d').html('|' + firstVal + " - " + secVal + '| = ' + value);
    }
  });

  $('#range-0').range({
    min: 0,
    max: 10,
    start: 5,
    labelType: 'letter'
  });

  // No Step
  $('#range-1').range({
    min: 0,
    max: 10,
    start: 5,
    step: 0,
    onChange: function(value) {
      $('#display-1').html(value);
    }
  });

  // Place value in an input
  $('#range-2').range({
    min: 0,
    max: 10,
    start: 5,
    input: '#input-2'
  });

  // Or use a custom callback
  $('#range-3').range({
    min: 0,
    max: 10,
    start: 5,
    onChange: function(value) {
      $('#display-3').html(value);
    }
  });

  // Set custom step
  $('#range-4').range({
    min: 0,
    max: 10,
    start: 4,
    step: 2,
    input: '#input-4'
  });
});