Customizable & Mobile Friendly jQuery Slider Plugin - sGlide

sGlide is a jQuery slider plugin used to convert a DIV element into a flexible, customizable and touch-friendly range slider. Supports both vertical or horizontal modes.

Basic Usage:

1. Include jQuery library and the jQuery sGlide.js script on the web page.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="sGlide.js"></script>

2. Create an empty DIV element with an unique ID.

<div id="slider-demo" class="slider_bar"></div>

3. Call the plugin with customization options to generate a range slider.

$(document).ready(function(){
$('#slider-demo').sGlide(OPTIONS);
});

4. Style the range slider via CSS as shown below.

#slider-demo {
  box-shadow: inset 8px 4px 16px #333;
  border-bottom: #eee solid 1px;
}

#slider-demo .follow_bar {
  background-color: #693;
  box-shadow: inset 0 1px 3px #222;
}

.sglide-buttons {
  vertical-align: middle;
  border-radius: 9px;
}

.sglide-buttons:hover,
.sglide-buttons:active { background-color: #fff; }

5. Options and defaults. All properties are optional, however, to retrieve value, use the drop or drag callback:

• o.guid returns slider's id
• o.value returns slider's value

$(document).ready(function(){
$('#slider-demo').sGlide({
  startAt: 60,      // start slider knob at - default: 0
  image: 'none'       // string - image path
  retina: true,     // boolean - larger knob image with suffix @2x for retina displays
  width: 200,       // integer - default: 100
  height: 20,       // integer - default: 40
  unit: 'px',       // 'px' or '%' (default)
  pill: true,        // boolean - default: true
  snap: {
    marks   : false,
    type    : false,
    points    : 0,
    sensitivity : 0
  },
  disabled: false,
  colorShift: [],
  vertical: false,
  noHandle: false,
  buttons: false,
  totalRange : [0,0],
  drop/drag/onSnap/onButton/onload: function(o){
    console.log('returned object',o);
  }
});
});

Change logs:

v3.1.0 (2018-02-15)

• retina setting default set to false

v3.0.0 (2018-01-12)

• added jQuery 3 support;
• added resize support;
• removed orientation-change support;
• removed onload callback to favour custom event (ready);
• restored 'custom' property to output on ready
• added Ctrl key option; fixed key-press event that disabled other key controls in the browser

2017-08-09

• v2.3.0: add 2 extra snap points to the previous maximum for the ability to snap every 10%

2017-05-03

• fix infinite loop in ie8

2016-12-29

• general improvements

2016-04-30

• v2.2.0

2016-04-15

• snap sensitivity; code optimization

2015-03-30

• v2.2.0

2015-02-02

• v2.1.2

2014-11-17

• Fixed for IE.

2014-11-14

• 2.1.0 updates

2014-10-31

• fixed some functional inconsistencies; 
• added shift key control

2014-10-27

• more code cleaning; 
• fixed issues in destroy methods;

2014-10-24

• added a standalone version.

---

This awesome jQuery plugin is developed by dkazmer. For more Advanced Usages, please check the demo page or visit the official website.