Slider

A slider should be used to select a value where multiple answers could be an option, such as an age picker. Icons to use in the pip can be selected from the icon library. Sliders will work from mobile devices up and will feedback to a user the option they have selected instantly. The slider relies on noUiSlider. Please refer to the documentation for more information. The slider takes a number of options:

  • data-js-min Is the minumum value of a slider
  • data-js-max Is the maximum value of a slider
  • data-js-start Is the value a slider should start at
  • data-js-step Is the number of values the slider tooltip should move
  • data-js-suffix Defines the suffix added to teh value displayed in tooltips and labels (e.g. days, months, lbs, kgs)
  • data-js-data-js-labels takes an object to plot labels below the slider
  • data-js-data-js-type specifies the type of slider required
  • Adding the class rc-slider--gradient applies a visual grade to the slider

Slider bar default

html
            <div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="100" data-js-start="0" data-js-step="1" data-js-suffix="days">
    <input type="text" id="slider-result" />
</div>
        

Slider bar default - stepped

html
            <div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="100" data-js-start="0" data-js-step="25" data-js-suffix="lbs">
    <input type="text" id="slider-result" />
</div>
        

Slider bar with indicators

html
            <div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="12" data-js-start="3" data-js-labels='{"0":"0", "25":"25", "50":"50", "75":"75", "100":"100"}' data-js-type="slider-labels" data-js-suffix="months">
    <input type="text" id="slider-result" />
</div>
        

Slider bar - throttle

html
            <div class="rc-slider" data-js-slider="" data-js-min="0" data-js-max="12" data-js-start="3" data-js-second-marker="6" data-js-labels='{"0":"0", "25":"25", "50":"50", "75":"75", "100":"100"}' data-js-type="slider-labels" data-js-suffix="months">
    <input type="text" id="slider-result" />
</div>
        

Slider - visual grade

html
            <div class="rc-slider rc-slider--gradient" data-js-slider="" data-js-min="0" data-js-max="100" data-js-start="0" data-js-step="1">
    <input type="text" id="slider-result" />
</div>
        

Slider bar - throttle - visual grade

html
            <div class="rc-slider rc-slider--gradient" data-js-slider="" data-js-min="0" data-js-max="12" data-js-start="2" data-js-second-marker="4" data-js-labels='{"0":"0", "25":"25", "50":"50", "75":"75", "100":"100"}' data-js-type="slider-labels" data-js-suffix="lbs">
    <input type="text" id="slider-result" />
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 13th September 2018 [ui_assets/elements/slider.yml]
    Spelling/ grammar
  • 27th June 2018 [ui_assets/elements/slider.yml]
    format docs
  • 25th June 2018 [ui_assets/elements/slider.yml]
    fix docs
  • 21st June 2018 [ui_assets/elements/slider.yml]
    update docs
  • 19th June 2018 [ui_assets/elements/slider.yml]
    tests
  • 19th June 2018 [ui_assets/elements/slider.yml]
    update structure
  • 17th May 2018 [ui_assets/elements/slider.yml]
    update markup
  • 16th May 2018 [ui_assets/elements/slider.yml]
    update slider template
  • 15th May 2018 [ui_assets/elements/slider.yml]
    update template markup to include 2 sliders
  • 15th May 2018 [ui_assets/elements/slider.yml]
    add slider page back in
  • 8th March 2018 [ui_assets/elements/slider.yml]
    Re-ordered nav items
  • 8th March 2018 [ui_assets/elements/slider.yml]
    Ordered elements alpabetically
  • 19th February 2018 [ui_assets/elements/slider.yml]
    Convert all multi line text to use
  • 1st December 2017 [ui_assets/elements/slider.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/slider.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/elements/slider.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 6th November 2017 [ui_assets/elements/slider.yml]
    Changed slider step to 2
  • 29th August 2017 [ui_assets/elements/slider.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 19th July 2017 [ui_assets/elements/slider.yml]
    Added associated files to page config for use with git info collection.
  • 18th July 2017 [ui_assets/elements/slider.yml]
    Enabled options through data-attributes and reflected through markup in the examples.
  • 11th July 2017 [ui_assets/elements/slider.yml]
    Added remaining content.