Draggable multiple range sliders
Elessar is available via npm and Bower, and as standalone files:
npm install elessar | bower install elessar |
|---|
Elessar requires jQuery. If you're using npm or Bower, it's installed as part of this step. If not: a) why not? they're pretty sweet, b) download it, and I assume you're just using <script> tags, so just add a <script> tag.
Elessar exports as a CommonJS (Node) module, an AMD module, or a browser global:
varRangeBar=require('elessar');require(['elessar'],function(RangeBar){ ... });<scriptsrc="path/to/elessar.js"></script>Create a rangebar with var rangeBar = new RangeBar then add rangeBar.$el to the DOM somewhere.
newRangeBar({values: [],// array of value pairs; each pair is the min and max of the range it createsreadonly: false,// whether this bar is read-onlymin: 0,// value at start of barmax: 100,// value at end of barvalueFormat: function(a){returna;},// formats a value on the bar for outputvalueParse: function(a){returna;},// parses an output value for the barsnap: 0,// clamps range ends to multiples of this value (in bar units)minSize: 0,// smallest allowed range (in bar units)maxRanges: Infinity,// maximum number of ranges allowed on the barbgMarks: {count: 0,// number of value labels to write in the background of the barinterval: Infinity,// provide instead of count to specify the space between labelslabel: id// string or function to write as the text of a label. functions are called with normalised values.},indicator: null,// pass a function(RangeBar, Indicator, Function?) Value to calculate where to put a current indicator, calling the function whenever you want the position to be recalculatedallowDelete: false,// set to true to enable double-middle-click-to-deletedeleteTimeout: 5000,// maximum time in ms between middle clicksvertical: false,// if true the rangebar is aligned vertically, and given the class elessar-verticalbounds: null,// a function that provides an upper or lower bound when a range is being dragged. call with the range that is being moved, should return an object with an upper or lower keyhtmlLabel: false,// if true, range labels are written as htmlallowSwap: true// swap ranges when dragging past});Returns array of pairs of min and max values of each range.
bar.val();//=> [[0,20], [34,86]]Updates the ranges in the bar with the values. Returns the bar, for chaining.
bar.val([[0,30],[40,68]]);//=> bar: RangeBarEvent that triggers constantly as the value changes. Useful for reactively triggering things in your UI. Callback is passed the current values of the ranges and the range element that is changing.
Event that triggers after the user has finished changing a range. Useful for updating a Backbone model. Callback is passed the current values of the ranges and the range element that has changed.
If Elessar has made your life easier, consider sending me a small donation.
