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
<duet-range-slider
  label="Sijoitettava pääoma"
  value="3000"
  min="100"
  max="10000"
  step="100"
  unit=" €"
  expand>
</duet-range-slider>

<script>
  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)
  })
</script>

Properties #

PropertyAttributeDescriptionTypeDefault
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 #

EventDescriptionType
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
input.focus().

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

Integration

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.