jQuery LabelSlider.js Plugin Demos

Click and drag the labels next to each input to change the values.

Nested Input

<label id="demo_nested_input">Label <input></label>
$('#demo_nested_input').labelSlider();

Associated Input

<label id="demo_associated_input" for="associated_input">Label</label> <input id="associated_input">
$('#demo_associated_input').labelSlider();

Multiple Labels


<label class="demo-multiple-labels" for="multiple_labels_input">Label 1</label>
<br>
<label class="demo-multiple-labels">Label 2 <input id="multiple_labels_input"></label>
$('.demo-multiple-labels').labelSlider();

Nested Input With No Label Tag

Label 
<div id="demo_no_label">Label <input></div>
$('#demo_no_label').labelSlider();

Associated Input With No Label Tag

Label 
<span id="demo_no_label_associated" for="no_label_associated_input">Label</span> <input id="no_label_associated_input">
$('#demo_no_label_associated').labelSlider();

Input Type=Number

<label id="demo_number_type">Label <input type="number"></label>
$('#demo_number_type').labelSlider();

Input Type=Range

<label id="demo_slider_type">Label <input type="range"></label>
$('#demo_slider_type').labelSlider();

Input Type=Search

<label id="demo_search_type">Label <input type="search"></label>
$('#demo_search_type').labelSlider();

Input Type=Text

<label id="demo_text_type">Label <input type="text"></label>
$('#demo_text_type').labelSlider();

Input Type Not Defined

<label id="demo_type_not_defined">Label <input></label>
$('#demo_type_not_defined').labelSlider();

Input Type=Date

<label id="demo_date_type">Label <input type="date"></label>
$('#demo_date_type').labelSlider();

Meter Control

<label id="demo_meter">Label <meter min="0" max="100" value="95">95 of 100</meter></label>
$('#demo_meter').labelSlider();

Progress Control

<label id="demo_progress">Label <progress value="60" max="100">60%</progress></label>
$('#demo_progress').labelSlider();

Minimum and Maximum Values

The min, max, and step attributes may also be used on inputs with type=text and other supported input types. 


<label class="demo-min-max">Label <input type="number" min="0" max="100"></label>
<br>
<label class="demo-min-max">Date <input type="date" min="2012-01-01" max="June 20, 2017"></label>
$('.demo-min-max').labelSlider();

Negative Numbers

<label id="demo_negative_min_max">Label <input type="number" min="-100" max="-5"></label>
$('#demo_negative_min_max').labelSlider();

Step

<label id="demo_step">Label <input type="number" step="5"></label>
$('#demo_step').labelSlider();

Negative Step

Negative step values are not valid for number inputs, however LabelSlider supports them. Negative step values will cause LabelSlider to invert (sliding right will decrease the value and sliding left will increase the value). 

<label id="demo_negative_step">Label <input type="number" step="-1"></label>
$('#demo_negative_step').labelSlider();

Floating Point Step

<label id="demo_floating_point_step">Label <input type="number" step="0.1"></label>
$('#demo_floating_point_step').labelSlider();

Floating Point Numbers


<label class="demo-floating-point-numbers">Label <input type="number" value="15.2613"></label>
<br>
<label class="demo-floating-point-numbers">Label <input type="number" value="15.2613" step="0.001"></label>
$('.demo-floating-point-numbers').labelSlider();

Input Change Event

<label id="demo1">Hue <input class="hue" type="number" min="0" max="360" value="100"></label>
<label id="demo1">Saturation <input class="saturation" type="number" min="0" max="100" value="50"></label>
<label id="demo1">Lightness <input class="lightness" type="number" min="0" max="100" value="50"></label>
<div id="demo1_swatch" style="display: inline-block; height: 34px; width: 50px; margin-bottom: -13px; margin-left: 20px;"></div>

function demoChangeEvent_updateColor() {
	$('#demo_change_event_swatch').css('background-color', 'hsl(' + $('.demo-change-event .hue').val() + ', ' + $('.demo-change-event .saturation').val() + '%, ' + $('.demo-change-event .lightness').val() + '%)');
}

$('.demo-change-event').labelSlider();
$('.demo-change-event INPUT').change(demoChangeEvent_updateColor);
demoChangeEvent_updateColor();

Input Change Event On Stop

<label id="demo1">Hue <input class="hue" type="number" min="0" max="360" value="100"></label>
<label id="demo1">Saturation <input class="saturation" type="number" min="0" max="100" value="50"></label>
<label id="demo1">Lightness <input class="lightness" type="number" min="0" max="100" value="50"></label>
<div id="demo1_swatch" style="display: inline-block; height: 34px; width: 50px; margin-bottom: -13px; margin-left: 20px;"></div>

function demoChangeEventOnStop_updateColor() {
	$('#demo_change_event_onstop_swatch').css('background-color', 'hsl(' + $('.demo-change-event-onstop .hue').val() + ', ' + $('.demo-change-event-onstop .saturation').val() + '%, ' + $('.demo-change-event-onstop .lightness').val() + '%)');
}

$('.demo-change-event-onstop').labelSlider({ triggerChangeOnStop : true });
$('.demo-change-event-onstop INPUT').change(demoChangeEventOnStop_updateColor);
demoChangeEventOnStop_updateColor();

Slower Value Changes

<label id="demo_slow_value_changes">Label <input type="number"></label>
$('#demo_slow_value_changes').labelSlider({ pixelsPerUnit: 10 });

Faster Value Changes

The rate of value change can be increased by setting pixelsPerUnit to a number less than 1 and greater or equal to 0.01. This basically has the effect of setting the input's step attribute to a number greater than 1. The usefulness of it comes when used in combination with a floating point step value. 

<label id="demo_fast_value_changes">Label <input type="number" step="0.001"></label>
$('#demo_fast_value_changes').labelSlider({ pixelsPerUnit: 0.05 });

Validation Disabled

Notice that you can type any character into the input. Disabling LabelSlider's validation is useful when you are handling validation yourself. 

<label id="demo_validation_disabled">Label <input></label>
$('#demo_validation_disabled').labelSlider({ validate: false });

Input Value Initialization Disabled

<label id="demo_value_init_disabled">Label <input></label>
$('#demo_value_init_disabled').labelSlider({ initValue: false });

Disabled Input

<label id="demo_disabled_input">Label <input disabled="disabled"></label>
$('#demo_disabled_input').labelSlider();

Read-Only Input

<label id="demo_readonly_input">Label <input readonly="readonly"></label>
$('#demo_readonly_input').labelSlider();

CSS Class Applied When Sliding

The CSS class label-slider-sliding is added to the input while the user is sliding the label control. 

#demo_css_sliding_class INPUT.label-slider-sliding
{
	background: #FBF493;
}
<label id="demo_css_sliding_class">Label <input></label>
$('#demo_css_sliding_class').labelSlider();

Declarative Instantiation Using CSS Class=label-slider

<label class="label-slider">Label <input></label>

API

Instantiation

Instantiate like any other jQuery plugin: 

$('LABEL').labelSlider(settings);

Or you may add the class label-slider: 

<label class="label-slider">Label <input></label>

Licensed under the GNU GENERAL PUBLIC LICENSE

© Copyright 2014 Corey Meredith