Sliders

These controls and components allow customer input to manipulate their value.

Requires the RZSlider directive.

Horizontal

<rzslider class="slider"
  rz-slider-model="slider.value"
  rz-slider-options="slider.options">

  <!-- don't include this (it's auto-generated by the directive and is for demo purposes only). -->
  <span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
  <span class="rz-bar-wrapper" style="opacity: 1; width: 120px; left: 0px;"><span class="rz-bar rz-selection"></span></span>
  <span class="rz-pointer rz-pointer-min" role="slider" aria-valuenow="0.8" aria-valuetext="" aria-valuemin="0" aria-valuemax="1" tabindex="0" aria-orientation="vertical" style="left: 115px;"></span>
  <!-- end of ignore -->

</rzslider>

Description

Sliders give customers the ability control and select ranges in the app. Usually for age and income ranges.

Vertical

<rzslider class="slider slider--vertical"
  rz-slider-model="slider.value"
  rz-slider-options="slider.options">

  <!-- don't include this (it's auto-generated by the directive and is for demo purposes only). -->
  <span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
  <span class="rz-bar-wrapper" style="opacity: 1; height: 120px; bottom: 0px;"><span class="rz-bar rz-selection"></span></span>
  <span class="rz-pointer rz-pointer-min" role="slider" aria-valuenow="0.8" aria-valuetext="" aria-valuemin="0" aria-valuemax="1" tabindex="0" aria-orientation="vertical" style="bottom: 115px;"></span>
  <!-- end of ignore -->

</rzslider>

Description

Sliders give customers the ability control and select ranges in the app. Usually for volume ranges.

Do

  • Ensure customers have enough whitespace around the element

Don't

  • Use sliders for values that require precise control

Accessibility

  • Receives :focus
  • Must have aria-valuemin, aria-valuemax, aria-valuenow