Range slider
JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
demo
js
pics
tasks
test
.gitignore
.jscs.json
Gruntfile.js
LICENSE
package.json
rader.css
rader.js
rader.min.js
rader.min.js.map
readme.md

readme.md

Rader - range slider.

Demo

http://diokuz.github.io/rader/simple.html

http://diokuz.github.io/rader/

How to use rader

Make sure you have jQuery on your page.

Pick some js

<script src="rader.min.js"></script>

Then add some html and css

<div class="rader">
    <div class="rader__track">
        <!-- Runners -->
        <div class="rader__runner _left"></div>
        <div class="rader__runner _right"></div>
    </div>
</div>

<script src="rader.css"></script>

or make your own. If so, make sure you have a proper css.

Then just call rader:

$('.rader').rader({
    runners: '.rader__runner'
});

Thats it!

For advanced usage see API below.

Features

  • 2, 3, 4... 10000000 runners per one slider
  • Bumping, sticking, transitioning...
  • Non-linear and exponent intervals support
  • Flexible markup support
  • (new!) 1 runner support
  • (new!) Vertical mode

API

Attention! the context for all input selectors is document, not 'root' param! Remember that and precisely define selectors for all your dom-elements.

Document is chosed as default context because in that case you have more power: you may, for example, define one track inside root and two additional tracks outside root dom-element.

Also, you can pass jQuery-objects instead if selectors, like $('.track') instead of '.track'.

{
    // Root dom node (most parent) for slider, also - statical part of track
    root: '.slider',

    // Whole track.
    track: '.track',

    // Active (between runners) part of track
    trackActive: '.track-active',

    // Dom elements of points
    points: '.point',

    // Dom elements responsible for dragging (runners)
    runners: '.runner',

    // CSS modifier for points in range for now
    pointInRangeCls: '.point_active'

    // Relative linear point positions
    pointsPos: [ 0, 12, 33 ],

    // Values which will be linked to points
    values: [1, 10, 77, 10000],

    // Values on which runners will point on slider init
    runnersVal: [ 2, 600 ],

    // Runners with 1 will be freezed (user will not be able to move them)
    runnersFreeze: [ 1, 0 ],

    // Sticky radius for runner (around each point) in px
    stickingRadius: 40,

    // Minimal distance between two runners in px
    bumpRadius: 22,

    // Use 'log' value if you want logarithmic scale
    scale: 'log',

    // Which direction will be used (horizontal '-' by default or vertical '|') for slider
    direction: '-',

    // If true, click to track will move the closest non-freezed runner to click point
    click: false,

    // CSS class on root element when dragged runners goes to stick (with transition) on point
    transCls: '.rader_trans',

    // Event on drag end (mouseup, touchend, generating only by real user)
    change: function(e) {},

    // Event on drag (mousemove, touchmove)
    move: function(e) {},

    // Event on drag end (generating by real user or by methods like setters .pos and .val)
    onUpdate: function(e) {}
}

Methods

var rader = $('.rader').rader(params);

/**
 * Emulation of drag of runner number num (0, 1, 2...) to defined position pos (px)
 * @return current position (px) of runner number num (0, 1, 2...) in getter mode, and rader instance in setter mode
 */
rader.pos(num, pos);

/**
 * Emulation of drag of runner number num (0, 1, 2...) to defined position of value val (user-defined dimension)
 * @return current value (user-defined dimension) of runner number num (0, 1, 2...) in getter mode, and rader instance in setter mode
 */
rader.val(num, val);

/**
 * Invalidating all positions of runners and track
 */
rader.invalidate();

/**
 * Killing the rader instance, all its event listeners
 */
rader.dispose();

License

MIT.