Slider Widget

input-slider.htm (hint: right click, save as)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<style>
/* Align multiple slider inputs by suitably fixing their value width: */
.form-inline .form-control.slider-value {
  width: 80px;
}
</style>

<div class="panel panel-primary">
  <div class="panel-heading">Slider Widget</div>
  <div class="panel-body">

    <h3>Standard Numerical Inputs</h3>

    <p>The number input is just the bootstrap default:</p>

    <input class="form-control" type="number" id="input-num1" name="num1" value="80" min="0" max="100" step="1">
    <br/>

    <p>The range input has some styling optimization for touch devices:</p>

    <input class="form-control" type="range" id="input-rng1" name="rng1" value="80" min="0" max="100" step="1">
    <br/>

    <h3>Slider Widget</h3>

    <p>
      In many cases you'd like to give especially the touchscreen user a combination of these input
      elements, and as sliding may be too imprecise you also need large buttons for single step changes.
      That's what the slider widget does. It also adds the option of a checkbox and a default value to
      reflect if the user control shall be applied.
    </p>

    <div class="row">
      <div class="col-md-9">

        <p>Sliders can easily be created from minimal markup using the <code>.slider()</code> plugin,
          with configuration given by data attributes and/or dynamic options:</p>

        <div class="form-control slider" id="sld1" data-min="-5" data-max="50" data-step="0.5"
          data-default="40" data-unit="%" data-disabled="false" data-checked="true" data-value="10" />
        <br/>

        <div class="form-control slider" id="sld2" />
        <br/>

        <p>…and slider state, limits and value can be controlled using the same method:<br/>
          <button type="button" class="btn btn-default" onclick="$('#sld1').slider({ value:42 })">
            Set sld1 value to 42
          </button>
          <button type="button" class="btn btn-default" onclick="$('#sld1').slider({ checked:true })">
            Check sld1
          </button>
          <button type="button" class="btn btn-default" onclick="$('#sld1').slider({ disabled:true })">
            Disable sld1
          </button>
          <button type="button" class="btn btn-default" onclick="$('#sld1').slider({ disabled:false })">
            Enable sld1
          </button>
        </p>
        <br/>

        <p>If you need even more control, you can create the slider markup yourself as well:</p>

        <div class="form-control slider" id="sld3" data-default="50" data-reset="false"
          data-value="80" data-min="-10" data-max="100" data-step="1">
          <div class="slider-control form-inline">
            <input class="slider-enable" type="checkbox" checked>
            <input class="form-control slider-value" type="number" id="input-sld3" name="sld3">
            <span class="slider-unit">%</span>
            <input class="btn btn-default slider-down" type="button" value="➖">
            <input class="btn btn-default slider-set" type="button" value="Lo" data-set="25">
            <input class="btn btn-default slider-set" type="button" value="Hi" data-set="75">
            <input class="btn btn-default slider-up" type="button" value="➕">
          </div>
          <input class="slider-input" type="range">
        </div>
        <br/>

      </div>
      <div class="col-md-3">

        <p><u>Events &amp; values</u>:</p>
        <pre id="show-sldev"></pre>

      </div>
    </div>

    <br/>

    <p>
      Checkbox, buttons and unit are optional. You can reduce the widget to just a number or
      just a range input, the input then needs to have the <code>slider-input</code> class.
    </p>

    <p>
      The checkbox element defines the default value to be set on unchecking in
      <code>data-default</code>. By default, the checkbox will restore the previous user
      value when re-checked, to disable this, set <code>data-reset</code> to "true".
      To reset the value to the default from a script, call the <code>.slider()</code>
      method with <code>value: null</code> (this resets both the actual and the stored
      user value).
    </p>

    <p>
      Values and checkbox status need to be consistent on init, or be set by your script.
      To hook into value changes, attach event handlers to events <code>input</code>
      and/or <code>change</code> as usual. Read the <code>checked</code> property to get the
      checkbox state.
    </p>

  </div>
</div>

<script>
(function(){

  /* Show page source: */
  var pagesrc = $('#main').html();
  $('.panel-heading').prepend('<button type="button" class="btn btn-sm btn-info action-showsrc"' +
    ' style="float:right; position:relative; top:-5px;">Show page source</button>');
  $('.action-showsrc').on('click', function() {
    $('<div/>').dialog({
      title: 'Source Code',
      body: '<pre style="font-size:85%; height:calc(100vh - 230px);">'
        + encode_html(pagesrc) + '</pre>',
      size: 'lg',
    });
  });

  /* Init sliders: */
  $('.slider').slider();
  $('#sld2').slider({ min:-10, max:10, step:0.1, default:2.5, unit:'kW', checked:false, value:-3.8 });

  /* Show slider events & values: */
  var sldev = {};
  $('#input-sld1, #input-sld2, #input-sld3').on('input change', function(ev) {
    sldev[this.name] = $.extend(sldev[this.name], { checked: this.checked });
    // Note: this.value is unvalidated here for a direct entry, but the validation is simple:
    sldev[this.name][ev.type] = Math.max(this.min, Math.min(this.max, 1*this.value));
    $('#show-sldev').text(JSON.stringify(sldev, null, 2));
  });

})();
</script>