145 lines
5.5 KiB
HTML
145 lines
5.5 KiB
HTML
<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 & 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>
|