Mobile-friendly Slider Control Plugin - jQuery xslider

xslider is a flexible, customizable, responsive, mobile-friendly, jQuery based slider control which can be used for range input, pagination controls, carousel navigation, and much more.

Supports mouse, touch events, stylus and works with most modern browsers.

How to use it:

1. Include the stylesheet jquery.xslider.css and JavaScript jquery.xslider.js on the webpage which has jQuery library loaded.

<link rel="stylesheet" href="jquery.xslider.css">
<script src="jquery.min.js"></script>
<script src="jquery.xslider.js"></script>

2. Create an element which will be served as the container for the slider control.

<div id="demo"></div>

3. Call the function on the container element and done.

$('#demo').XSlider({
  // options here
});

// or
new XSlider({
  el: '#demo',
  // options here
});

4. Set the min/max/initial values. Default: 1.

$('#demo').XSlider({
  min: 1,
  max: 10,
  value: 5
});

5. Set the step size. Default: 1.

$('#demo').XSlider({
  step: 1
});

6. It also supports vertical slider.

$('#demo').XSlider({
  isVertical: true
});

7. Customize the slider handle.

$('#demo').XSlider({
  handleAutoSize: true,
  handleAutoSizeMin: 10,
  handleWidth: 10,
  handleHeight: 10,
  handleWrapperSideStart: 0,
  handleWrapperSideEnd: 0,
});

8. Customize the tooltip.

$('#demo').XSlider({
  tooltip: true,
  tooltipOffset: 3,
  tooltipDirection: '', //top bottom left right
  tooltipFormat(value){
    return value.toFixed(that.precision) + '/' + that.opts.max.toFixed(that.precision);
  }
});

9. Make the slider automatically snap to the value.

$('#demo').XSlider({
  autoScroll: true,
  autoScrollDelayTime: 250
});

10. More customization options.

$('#demo').XSlider({

  // width/height of the slider
  width: '', 
  height: '',

  // extra CSS class
  className: '',

  // change the value by clicking the background
  clickToChange: true,

  // fire the onChange event on init
  initRunOnChange: true, 

  // used to prevent conflicts with other plugins
  isStopEvent: false
  
});

11. Callback functions which will be fired after the value changed.

$('#demo').XSlider({

  onChangeEnd(val){},
  onChange(val) {}

});

12. API methods.

// get the current value
mySlider.getValue();

// set the value
mySlider.setValue(val);

// re-calc the size
mySlider.resize();

// update options
mySlider.setOptions(opts);

Changelog:

2019-06-14

• Bugfix

2019-06-10

• Bugfix

2019-06-05

• Bugfix
• Add more options & API methods.

2019-05-30

• Bugfix

---

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