Skip to main content
LocalTapiola Turva

Range Slider ready

Range Slider lets user specify a numeric value using a slider which must be no less than a given value, and no more than another given value.

Open in new window
  label="Sijoitettava pääoma"
  unit=" €"

  var range = document.querySelector("duet-range-slider")

  range.addEventListener("duetInput", function(e) {
    console.log("User input detected", e)
  range.addEventListener("duetChange", function(e) {
    console.log("Change detected in input", e)

Properties #

debouncedebounceSet the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke.number0
expandexpandExpands the input to fill 100% of the container width.booleanfalse
identifieridentifierAdds a unique identifier for the input.stringundefined
labellabelLabel for the range slider.string"label"
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
maxmaxMaximum value.number100
minminMinimum value.number0
stepstepStep amount.number1
themethemeTheme of the input. Can be one of: "default", "turva".string""
unitunitUnit for the range slider.string""
valuevalueValue of the input.number0

Events #

duetChangeEmitted when the value has changed.CustomEvent<any>
duetInputEmitted when a keyboard input ocurred.CustomEvent<any>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-range-slider. Use this method instead of the global

Returns #

Type: Promise<void>

Dependencies #

Depends on #

Graph #

graph TD;
  duet-range-slider --> duet-label
  style duet-range-slider fill:#f9f,stroke:#333,stroke-width:4px


For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.