Shards

Slider controls in Shards require a single JavaScript dependency, the noUiSlider library provided for you inside the shards.js or shards.min.js file.

In order to create a basic slider, you need a text input with the .custom-slider-input class placed inside a wrapper with any class or ID.

<div id="shards-custom-slider">
  <input type="hidden" class='custom-slider-input' name="custom-slider-value">
</div>

<!-- JavaScript -->
<script>
  jQuery('#shards-custom-slider').customSlider({
    start: [50],
    range: {
      'min': 0,
      'max': 100
    }
  });
</script>

Multiple Handles

You can create sliders with multiple handles simply by chaning the values inside the start option which controls at what value each handle should start. Keep in mind that adding more values would require adding more inputs with the .custom-slider-input class.

<div id="shards-custom-slider">
  <input type="hidden" class='custom-slider-input' name="custom-slider-value-1" >
  <input type="hidden" class='custom-slider-input' name="custom-slider-value-2" >
</div>

<!-- JavaScript -->
<script>
  jQuery('#shards-custom-slider').customSlider({
    start: [25, 70],
    connect: true,
    range: {
      'min': 0,
      'max': 100
    }
  });
</script>

Tooltips

You can enable tooltips using the tooltips option inside the configuration and specifying a boolean value for each handle representing where the handle should be displayed or not.

<div id="shards-custom-slider">
  <input type="hidden" class='custom-slider-input' name="custom-slider-value-1" >
  <input type="hidden" class='custom-slider-input' name="custom-slider-value-2" >
</div>

<!-- JavaScript -->
<script>
  jQuery('#shards-custom-slider').customSlider({
    start: [25, 50],
    tooltips: [true, true],
    connect: true,
    range: {
      'min': 0,
      'max': 100
    }
  });
</script>

Pips

Pips allow you to display points along the slider bar and can be configured inside the pips configuration option.

<div id="shards-custom-slider">
  <input type="hidden" class='custom-slider-input' name="custom-slider-value-1" >
  <input type="hidden" class='custom-slider-input' name="custom-slider-value-2" >
</div>

<!-- JavaScript -->
<script>
  jQuery('#shards-custom-slider').customSlider({
    start: [25, 50],
    tooltips: [true, true],
    connect: true,
    range: {
      'min': 0,
      'max': 100
    },
    pips: {
      mode: 'positions',
      values: [0, 25, 50, 75, 100],
      density: 5
      }
  });
</script>

For more details on the available configuration options make sure you check out the official noUiSlider documentation. Keep in mind that some options may, or may not be available using the jQuery function provided and may require implementing the solution in plain JavaScript.