jQuery valueSlider

first jQuery Slider widget with internal blocking edges.

Buy me on codecanyon

About

slider component with different options

horizontal orientation
minimum and maximum values
minimum and maximum blocking edges that are before minimum and maximum
step incrementor
4 themes
touch capabale

Demos

Choose theme:

Basic value demo

Values:

Usage:

$("#ts5_4").edSingleSlider({
    noLabels: false,
    noMarkers: false,
    minimum: 0,
    maximum: 100,
    minimumEdge: 20,
    maximumEdge: 70,
    postfix: 'm/s'
});

Time demo

Values:

Usage:

$("#tsTimeDemo").edSingleSlider({
    noLabels: false,
    noMarkers: false,
    minimum: 0, // seconds from
    maximum: 7200, // seconds to
    theme: 'default',
    valueFormatter: function (value) {
       // custom formatter (see example)
    },
    stepCorrection: 60
});

Date demo

Values:

Usage:

$("#tsDateDemo").edSingleSlider({
    noLabels: false,
    noMarkers: false,
    minimum: new Date(2013, 8, 1, 0, 0, 0, 0).getTime(),
    maximum: new Date(2013, 8, 31, 0, 0, 0, 0).getTime(),
    theme: 'default',
    step: 1,
    valueFormatter: function (value) {
        // custom formatter (see example)
    },
    stepCorrection: 86400000
});

Setup

Add a reference to jquery.js, jquery.ui.core.js and jquery.ui.widget.js libraries:

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

Add a reference to ed.valueSlider.css, ed.valueSlider.default.css and ed.valueSlider.js:

<link href="stylesheets/ed.valueSlider.css" rel="stylesheet" type="text/css" /> 
<link href="stylesheets/ed.valueSlider.default.css" rel="stylesheet" type="text/css" /> 
<script src="scripts/ed.valueSlider.js" type="text/javascript"></script>

For some additional theme, just insert another theme stylesheet file ed.valueSlider.[themename].css

Add a container div element to your body.

                  
<div style="width: 200px;">
    <input type="text" id="valueSlider1" value="200" >
</div>

Initialize the slider:

$('#valueSlider1').edSingleSlider({minimum: 40, maximum: 500});

Options

Property	Type	Default	Description
minimum	number	0	minimum value
maximum	number	100	maximum value
minimumEdge	number	null	inner slider minimum edge value - slider can not be moved below this value
maximumEdge	number	null	inner slider maximum edge value - slider can not be moved above this value
value	number	1	initial value
step	number	1	increment step
postfix	string	''
noMarkers	boolean	false	whether to show slider value markers below
noLabels	boolean	false	whether to show slider value labels
theme	string	default	css theme
valueFormatter	function	null	function used to format displayed values. Must return string. See Time demo, or Date demo above
stepCorrection	number	null	Step correction for value formatter. See Time demo, or Date demo above

Methods

Method name	Parameters	Description, Example
-	options: Object A map of option-value pairs to set.	Initializes a slider $("#slider").edSingleSlider(options);
getValue	-	Get the value $("#slider").edSingleSlider('getValue');
destroy	-	Removes the spinner functionality completely. This will return the element back to its pre-init state. $("#slider").edSingleSlider('destroy');
disable	-	Disables the slider. $("#slider").edSingleSlider('disable');
enable	-	Enables the slider. $("#slider").edSingleSlider('enable');
option	-	Gets an object containing key/value pairs representing the current slider options hash. $("#slider").edSingleSlider('option');
option	optionName: string The name of the option to get.	Gets the value currently associated with the specified optionName. $("#slider").edSingleSlider('option', 'disabled');
value	value: object A value to set for the option.	Updates the slider value $("#slider").edSingleSlider('value', value);
update	options: Object A map of option-value pairs to set.	Initializes a slider $("#slider").edSingleSlider('update', options);

Events

Event	Event arguments	Description
edslider_start	{ value: number, percent: number, x: number };	Fired when a dragging starts
edslider_change	{ value: number, percent: number, x: number };	Fired when the slider is dragged
edslider_stop	{ value: number, percent: number, x: number };	Fired when a dragging stops
edslider_sliderclick	-	Fired when user clicks on the slider agis

$("#ts3_1").edSingleSlider()
    .on('edslider_change',function(eventArgs){  
        // your event handling function
    });