Mobile-friendly Slider Control Plugin - jQuery xslider

File Size: 13.3 KB
Views Total: 2077
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  // options here

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

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

  min: 1,
  max: 10,
  value: 5

5. Set the step size. Default: 1.

  step: 1

6. It also supports vertical slider.

  isVertical: true

7. Customize the slider handle.

  handleAutoSize: true,
  handleAutoSizeMin: 10,
  handleWidth: 10,
  handleHeight: 10,
  handleWrapperSideStart: 0,
  handleWrapperSideEnd: 0,

8. Customize the tooltip.

  tooltip: true,
  tooltipOffset: 3,
  tooltipDirection: '', //top bottom left right
    return value.toFixed(that.precision) + '/' + that.opts.max.toFixed(that.precision);

9. Make the slider automatically snap to the value.

  autoScroll: true,
  autoScrollDelayTime: 250

10. More customization options.


  // 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.


  onChange(val) {}


12. API methods.

// get the current value

// set the value

// re-calc the size

// update options



  • Bugfix


  • Bugfix


  • Bugfix
  • Add more options & API methods.


  • Bugfix

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