Mobile-friendly Slider Control Plugin - jQuery xslider

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.

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.

  direction: 'vertical'

7. Customize the slider handle.

  handleAutoSize: true,
  handleMinSize: 15

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.

  // extra CSS class
  className: '',
  // change the value by clicking the background
  clickToChange: true,
  // is active?
  isActive: 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.

  onDragChange(val, oldVal){},
  onChange(val, oldVal) {}

12. API methods.

// get the current value
// set the value
// re-calc the size

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

  • Publication date: 28.04.2019
  • Source