Customizable & Mobile Friendly jQuery Slider Plugin - sGlide

Customizable & Mobile Friendly jQuery Slider Plugin - sGlide
File Size: 91.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.