Range Slider

The range slider is a 3rd party add-on called NoUISlider.

The original website for the slider can be found here NoUISlider.

We needed dual input sliders for the entry requirements filter. HTML5 includes a range input slider but it is only single input. Webkit-based browsers allow you to overlay input to make it appear as a dual input slider. This does not work in Firefox and IE though. Therefore the decision was taken to include a ready-built solution.

noUiSlider is open source, and you can use it for free in any personal or commercial product. No attribution required. See their download pages for details. It is release under the WTFPL license. http://www.wtfpl.net/about/ I've not linked it as the language isn’t work safe!

Aria documentation

Assets needed

scripts/optional/nouislider.js

stylesheets/optional/nouislider.css

Example double input slider

Example markup to be include in the HTML. Once the JavaScript loads, it will add the slider.

<!-- form-item-range_slider start -->
<div class="form-item form-item--range-slider" id="my-lovely-id" data-range-slider-options='{"start": [70, 180], "connect": true, "step": 10, "range": {"min": 0, "max": 300}}'>
  <label for="my-lovely-id-input-first" class="hide-element">A useful label for the minimum input</label>
  <label for="my-lovely-id-input-second" class="hide-element">A useful label for the maximum input</label>
  <div class="range-slider-inputs">
    <input type="text" min="0" max="300" id="my-lovely-id-input-first" class="range-slider-input__number-first" value=80>
    <input type="text" min="0" max="300" id="my-lovely-id-input-second" class="range-slider-input__number-second" value=210>
  </div>
</div>
<!-- form-item-range_slider end -->

Example double input slider with plus added to input label when max is reached (required by Search)

The additional option of "addPlus": true adds a plus symbol onto the end of the value in the input field when the max value is selected. This is a search specific requirement but might be useful elsewhere. It's the consumers' responsibility to ensure that the '+' is removed from the value (if not automatically removed).

Example markup to be include in the HTML. Once the JavaScript loads, it will add the slider.

<!-- form-item-range_slider start -->
<div class="form-item form-item--range-slider" id="slider-with-plus" data-range-slider-options='{"start": [70, 180], "connect": true, "step": 0, "range": {"min": 0, "max": 144}, "addPlus": true}'>
  <label for="slider-with-plus-input-first" class="hide-element">A useful label for the minimum input</label>
  <label for="slider-with-plus-input-second" class="hide-element">A useful label for the maximum input</label>
  <div class="range-slider-inputs">
    <input type="text" min="0" max="300" id="slider-with-plus-input-first" class="range-slider-input__number-first" value=80>
    <input type="text" min="0" max="300" id="slider-with-plus-input-second" class="range-slider-input__number-second" value=210>
  </div>
</div>
<!-- form-item-range_slider end -->

JavaScript API

UCASDesignFramework.rangeSlider.initOnLoad  // true
UCASDesignFramework.rangeSlider.init(node)  // @param node context || document. Will bootstrap any uninitialised range sliders.
UCASDesignFramework.rangeSlider.create(id)  // @param id string (id of container .form-item)
UCASDesignFramework.rangeSlider.destroy(id) // @param id string (id of container .form-item)

Example failure

UCASUtilities.log.setDebugStatus(true) to see log messages.

<!-- form-item-range_slider start -->
<div class="form-item form-item--range-slider" id="my-failure-id" data-range-slider-options='{"connect": true, "step": 10, "range": {"min": 0, "max": 300}}'>
  <label for="my-failure-id-input-first" class="hide-element">A useful label for the minimum input</label>
  <label for="my-failure-id-input-second" class="hide-element">A useful label for the maximum input</label>
  <div class="range-slider-inputs">
    <input type="text" min="0" max="300" id="my-failure-id-input-first" class="range-slider-input__number-first">
    <input type="text" min="0" max="300" id="my-failure-id-input-second" class="range-slider-input__number-second">
  </div>
</div>
<!-- form-item-range_slider end -->