For D3mystic.com, my website on diablo3, I need a range slider that looks like the one below :

After looking on google with the terms "range slider github", I found several plugins that could match : rangeslider.js, bootstrap-slider, nouiSlider, ion.rangeSliderjquery-ui slider , powerange

However, the range slider must meet several mandatory criteria:

  • Highly customizable,
  • Methods of destruction and update
  • Must work with jquery 3 * and bootstrap 4 *
  • Plugin maintenance

We will see the advantages and disadvantages of each of its plugins and we will keep the one that fits best. For each plugin, I created a codepen.

1) Rangeslider.js

Be careful, the original plugin does not work, so use the one of stryzhevskyi.

Codepen :

See the Pen Rangeslider.js - Diablo3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Easy to use options
  • CSS easy to customize
  • Does not depend on jquery, jqueryUI or other
  • Options also work in attributes

Drawbacks :

  • Obligation to return the background when the button is active

2) Bootstrap-slider

Codepen :

See the Pen Bootstrap-slider - Diablo 3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Easy to use options
  • CSS easy to customize

Drawbacks :

  • Does not snap to increments on mouse click
  • Incompatible with jquery-ui

3) NoUiSlider

Codepen :

See the Pen noUiSlider - Diablo 3 Select by Detiege (@cromartie) on CodePen.

Advantages :

  • The most complete Slider in options and events
  • Very clear documentation
  • Does not depend on jquery, jqueryUI or other

Drawbacks :

  • Depends on an external plugin (wNumb) for handling numbers
  • Do not work on classes

4) Ion.rangeSlider

Codepen :

See the Pen Ion.rangeslider - Diablo3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Very complete slider in options and events
  • Clear documentation

Drawbacks :

  • The left side of the slider (irs-bar-edge) that must be modified
  • A style sheet rather difficult to modify

5) Jquery-ui slider

Codepen :

See the Pen JqueryUI slider - Diablo3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Easy to use options
  • CSS easy to customize
  • Responsive

Drawbacks :

  • The non-modifiable selection area
  • Do not work on classes

6) Powerange

Codepen :

See the Pen Powerange range slider - Diablo3 style by Detiege (@cromartie) on CodePen.

Advantages :

  • Easy to use options
  • CSS easy to customize
  • Responsive

Drawbacks :

  • Do not work when clicked with the mouse (do not work on tap)
  • Do not update on resize

The time has come to make a decision on choosing the slider. Let's start by removing bootstrap-slider for its incompatibility with jquery-ui (we might need the latter for the drag and drop) and Powerange because it does not work with the click of the mouse. Ion.Range slider is the slider that I would use, other plugins do not work on classes.