Customizable range slider component. Demo. Tests.
var Slidy = require('slidy');
var slidy = new Slidy(el?, {
//Minimum value
min: 0,
//Maximum value
max: 100,
//Step of the value. Can be a function (value) { return Math.round(value); }.
step: 1,
//Picker value. In case of multiple pickers - first picker's value.
value: ( this.min - this.max ) / 2,
//Type of placement: `horizontal`, `vertical`, `cartesian`, `circular`, `polar`.
orientation: 'horizontal',
//Repeat picker by axis: `'x'`, `'y'` or `'both'`.
repeat: false,
//Snap to steps during the drag or only when released.
snap: false,
//Options for picker instances (see addPicker method).
//[{value:0}, {value: 1}, ...]
pickers: [],
//Class to add to each picker.
pickerClass: 'slidy-picker',
//Make pickers single-ponted.
point: false,
//Enable click interaction or leave only drag.
click: true,
//Enable keyboard interactions.
keyboard: false,
//Enable mousewheel interactions.
wheel: false,
//Enable aria roles management.
aria: false,
//Change callback, will be instantly bound.
//The only way to catch initial `change` event.
change: function (e) { }
})
//Update all pickers sizes and positions according to their values (window resize etc).
.update()
//Disable interactivity.
.disable()
//Enable interactivity.
.enable()
//Calls fn on value changes.
.on('change', fn)
//Calls fn on user inputs.
.on('input', fn)
//Append additional picker.
.addPicker({
//Starting value of a picker.
value: 0,
//Apply release-animation.
release: false,
//Unlikely you want to redefine slidy’s params, but in case
min: slidy.min,
max: slidy.max,
point: slidy.point
});
//Return picker being focused.
slidy.getActivePicker()
//Move picker to relative `x`, `y` coordinates, update value.
.move(x, y)
//Increment/decrement picker value by `this.step` `times`.
.inc(times [, timesY])
//Update size and position of the picker according to the value.
.update();
//Append slidy element to body.
document.body.appendChild(slidy.element);
In order to extend supported browsers you may need to polyfill WeakMap
, WeakSet
, Node.prototype.contains
, MutationObserver
:
https://cdn.polyfill.io/v1/polyfill.js?features=default,WeakMap,WeakSet,Node.prototype.contains
change
callback.change
callback, having them in code would mean useless lines not fitting exact user needs. It is difficult to decide beforehead how values are to be serialized, e. g. 2d values. Focus of the slidy is to provide reliable and agile mechanism of slider input, but not to provide bunch of interfaces.change
, input
): if you need that, you can implement that via callbacks. It is done so to keep DOM space unpolluted.draggy — draggable provider which just works. resizable — resizable provider for the full suite.