sGlideRange()
to an empty <div>
with a unique identifier. You can leverage this identifier (or class
) to style the shell and its components with CSS. Hint: use .slider_knob
and .follow_bar
■const callback = o => {
// display results from 'o' Object
};
$('#mySlider_1').sGlideRange({
height : 10,
image : ['img/knob_from.png', 'img/knob_to.png'],
startAt : 70,
drag : callback,
onSnap : callback
});
$('#mySlider_2').on('sGlide.ready', (e, data) => { // run when slider is ready }).sGlideRange({ startAt : [50, 75], // percent only totalRange : [58,102], // custom values pill : false, width : 60, snap : { points : 4, marks : true } });
$('#myslider_3').sGlideRange({ startAt : 50, height : 20, locked : true }); // dynamically update $('#mySlider_3').sGlideRange( 'startAt', [valFrom, valTo], // Array of 2 numbers, percent true // animate );
$('#mySlider_4').sGlideRange({ startAt : 33.33, width : 300, unit : 'px', snap : { points : 5, marks : true, type : 'hard' }, vertical: true });
slider_div.sGlide('destroy')
or sGlide_inst.destroy()
■var el = document.getElementById('mySlider_5'); var my_slider = new sGlideRange(el, { startAt : [33.33, 66.66], width : 300, unit : 'px', snap : { points : 3, marks : true, type : 'soft' }, locked: true }); // dynamically update my_slider.startAt(80); // or ...startAt(25, 72)
// multiple sliders var sglideArr = []; // Array of sGlideRange instances var elements = document.getElementsByClassName('slider_bar'); for (let el of elements){ sglideArr.push(new sGlideRange(el, { width : 300, unit : 'px', drop : o => { // display results from 'o' Object }, })); }
Property | Default | Description |
startAt | 0 | Number or Array of two numbers. Percentage value(s) to set the slider handle position on its creation. Currently only accepts percentage values, but callbacks return both percentage and custom unit values at runtime. Note: when hard or soft snapping is set, the startAt handles will reposition to their closest snap points. |
image | 'none' | String or Array of two strings. Path of handle/knob image(s) to use; e.g. 'images/slider-knob.png' |
retina | false | Boolean. On retina displays, it automatically looks for an image with the suffix @2x based on the image property value. So with an image input of "drag_me.jpg", it'll assume "drag_me@2x.jpg" exists. |
width | 100 | Number. The width of the main shell of the slider. If unit is set to '%', width will be relative to its parent. |
height | 40 | Number. Pixel value of the height of the main shell of the slider. Ignores unit . |
unit | '%' | String. Also accepts 'px' to govern widths (relative / absolute sizing respectively). Note: unit defaults to 'px' when vertical setting is true for logistical reasons. |
pill | true | Boolean. Set to false to turn off rounded corners. |
disabled | false | Boolean. Disables user interactivity and hide knobs. |
vertical | false | Boolean. Rotates the slider 90 degrees counterclockwise using CSS3. When true, refrain from positioning the slider and its parent elements absolutely or relatively as this will offset the cursor registration. |
totalRange | [0, 0] | Array of two numbers. Custom units indicating start and end slider values. |
noHandle | false | Boolean. Collapses the knob. As of v2. Replaces showKnob . |
handleSize | 2% | String. Only accepted values are "big" and "small". The former will draw the handle at 4% of the slider's total width, the latter will draw it at 1%, otherwise defaults. As of v2. Overridden by noHandle or the use of an image. For pixel-perfect control, apply an image of desired size. |
locked | false | Boolean. Locks the range so that when dragging one slider handle, the other moves paralell with it. |
snap | {…} | Object. Contains the following snap settings. |
snap.points | 0 | Number. Set the number of snap points between 2 and 11. Effectively enables snapping. |
snap.marks | false | Boolean. Draws tiny snap marks to indicate the snap points. |
snap.type | false | String. Set to 'hard' so that the slider handle cannot be positioned between snap points. Set to 'soft', like 'hard', but handle is positioned only after it has been dropped. |
snap.sensitivity | 2 | Number. Accepts decimal values between 1 & 3 inclusive. The higher the number, the bigger the jump to a snap point. Doesn't apply to hard or soft snap, ie., snap.type unset. |
drop | Callback. Fire an event on handle drop. Receives an object containing slider data. | |
drag | Callback. Fire an event on handle drag. Receives an object containing slider data. | |
onSnap | Callback. Fire an event on handle snap. Receives an object containing slider data. |
2.0.0 | chainable ($) • added jQuery 3 support ($) • added bar-drag • added resize support • removed orientation-change event • removed showKnob to favour newly added noHandle • removed onload callback prop to favour ready event ($) or load method (standalone) • added 2 more snap points (up to 11) • rebuilt snap marks • more accurate snapping • added snap sensitivity • other major snap improvements (including equalizing snap point flank distance) & bug fixes • significant behavior change: when hard or soft snapping is set, the startAt handles will reposition to their closest snap points! • removed CustomEvent polyfill • all callbacks now receive sGlideRange context (this ) • removed internal custom element getter to favour querySelectorAll • better 'css' & 'extend' functions • better internal data storage / handling • handleSize prop • restored snapping other knob on knob-drag when locked • refactoring and general bug fixes | 20.02.2019 |
1.0.1 | bug fix: text inputs were not selectable by mouse-drag in Chrome for jQuery — a proper if statement in the document's mousemove event listener solved it, thereby possibly increasing performance (applied to both jQuery and standalone) | 01.02.2015 |
1.0.0 | born of sGlide | 16.11.2014 |