Range Slider

Ready

<duet-range-slider
  label="Sijoitettava pääoma"
  value="3000"
  min="100"
  max="10000"
  step="100"
  unit=" €"
  debounce="500">
</duet-range-slider>

<script>
  // Select the above range slider component
  var range = document.querySelector("duet-range-slider")

  // Listen for change events. Use debounce prop to adjust the time to trigger this.
  range.addEventListener("duetChange", function(e) {
    console.log("Change detected in range slider:", e.detail)
  })
</script>

<duet-range-slider
  label="Sijoitettava pääoma"
  value="3000"
  min="100"
  max="10000"
  step="100"
  unit=" €"
  debounce="500"
  expand>
</duet-range-slider>

<duet-range-slider
  label="This label is hidden, but still visible for screen readers"
  label-hidden
  value="50"
  min="1"
  max="100"
  step="1">
</duet-range-slider>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

• Number Input component uses a basic HTML <input type="range"> element behind the scenes and offers similar functionality and API for its users.
• Never use range slider when the entered numeric value needs to be exact as using a slider based control can be hard for certain users.
• label property is always required for an accessible input control.
• labelHidden property hides the above label visually, but still keeps it accessible for assistive technologies.
• disabled property makes the range slider disabled. This prevents users from being able to interact with the range slider, and conveys its inactive state to assistive technologies.
• accessibleActiveDescendant property can be used to indicate the id of a related component’s visually focused element.
• accessibleControls property can be used to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
• accessibleOwns property can be used to indicate the id of a component owned by the range slider.
• accessibleDescribedBy property can be used to indicate the id of a component which contains descriptive/help text related to the range slider.