JamWaffles

Mr. Slyde

Mr Slyde is a jQuery plugin to turn a standard <input> into a slider range control. There is the <input type="range"> in the HTML5 spec, but at the time of writing, there are no browsers that are known to support it.

This plugin aims to be as light and customisable as possible. If there is a feature you'd like, but isn't yet added, please submit requests here (GitHub).

Finally, report any bugs you find here (GitHub).

Examples

An input in HTML foo bar baz zip

Get Mr Slyde

Mr Slyde is just a single JavaScript file accompanied by a small amount of CSS, available for download on GitHub.

Usage

To use MrSlyde, simply apply it to the <input> elements you like with a selector:

$('input.foo').mrslyde();

Specifying Default Options

All options made available by MrSlyde can be seen under Options

Setting default options is done by passing an object to the plugin:

$('input.foo').mrslyde({
    min: 10,
    max: 30,
    default: 20
});

The example above will set all matched sliders to a range of 10-30 with a default of 20.

Specifying Per-input Options

This is perhaps the most useful feature of MrSlyde. If multiple sliders are required, but each with different properties, HTML5 data- attributes can be used. To avoid pollution, all MrSlyde attributes are prefixed with ms. Again, all options can be found under Options.

A basic example might look like this:

<input class="foo" data-msMin="150" data-msMax="300" data-msStepSize="15" value="175">

This will (when $.mrslyde is invoked) produce a slider with a range of 150-300 with a step size of 15 and a default (starting) value of 175.

Options

Below are all the options that can be passed to MrSlyde, either as defaults or data- attributes. Both types as well as the default values are shown.

Note that any data- attributes are lowercased by jQuery, so camel case isn't necessary.

min (data-msMin): 100

Specifies the minimum value the slider can be set to.
max (data-msMax): 200

Specifies the maximum value the slider can be set to.
default (value): 150

What the default value of the slider should be when $.mrslyde is invoked. Note that this uses the <input>'s value attribute instead of a data- attribute.
stepSize (data-msStepSize): 10

Sets to which multiple the slider value should snap to. For example, a value of 15 will increment the slider's value in steps of 15. Setting actual handle snap is defined by the snap: option, below.
snap (data-msSnap): true

If set to true, this will tell the handle to 'jump' to each step point along the slider track, instead of following the mouse pixel for pixel.
showValues (data-msShowValues): true

Specifies whether the minimum, current and maximum values should be displayed under the slider track.
precision (data-msPrecision): 0

Specifies how many digits should be present after the decimal point. For whole values, leave this at 0. For values less than 1, this option must be set to less than 1.

Styling Mr Slyde

This is very important. If you don't style him, Mr Slyde will disappear. There is an example CSS file available here, but you will want to write your own.

The HTML generated by the plugin is as follows:

<div class="mrslyde">
    <div class="slider">
        <div class="handle"></div>
        <div class="track"></div>
    </div>
    <div class="values">
        <span class="left"></span>
        <span class="center"></span>
        <span class="right"></span>
    </div>
</div>

The basic CSS is:

/* It is imperitive you put this in your CSS somewhere - it stops things being selected when a handle 
   is being dragged */
html.slyding {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* Container has to be inline */
div.mrslyde {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

/* Track style */
div.mrslyde div.track {
    border: 1px solid #76a7dc;
    height: 10px;
    margin: 3px 0px;
    background: #fff;
}

/* Handle style */
div.mrslyde div.handle {
    border: 1px solid #76a7dc;
    position: absolute;
    height: 16px;
    width: 16px;
    margin-top: -3px;
    background: #fff;
    cursor: pointer;
}

/* Value displays */
div.mrslyde div.values {
    text-align: center;
}

/* Minimum value */
div.mrslyde span.left {
    float: left;
}

/* Maximum value */
div.mrslyde span.right {
    float: right;
}

Put simply, style the slider track with div.mrslyde div.track, the handle with div.mrslyde.handle and the value displays with div.mrslyde div.values span. The HTML structure above should help.