Skip to content

Range ​

Accessible range slider that allows easy selection of a value by sliding a handle.

View SourceΒ 

Usage ​

css
@import "winduum/src/ui/range/index.css" layer(components);
js
import { setValue } from 'winduum/src/ui/range'

const rangeSlider = document.querySelector('#rangeSlider')

setValue(rangeSlider)
rangeSlider.addEventListener('input', ({ currentTarget }) => setValue(currentTarget))

Variants ​

  • default
  • multi

Props ​

  • default-propsΒ 

Tokens ​

  • vertical

Examples ​

Default ​

html
<div class="ui-range">
    <input type="range" value="0" step="10" max="100" min="0" aria-labelledby="single" id="range-single">
</div>

<output class="before:content-[attr(data-unit)]" data-unit="$" aria-label="Price" id="single">10 000</output>
liquid
<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/ui/range/index.js'

    const rangeSingle = document.querySelector('#range-single')

    const setSingleValue = ({ currentTarget }) => {
        setValue(currentTarget)

        setOutputValue(currentTarget, document.querySelector('#single'))
    }

    setSingleValue({ currentTarget: rangeSingle })
    rangeSingle.addEventListener('input', setSingleValue)
</script>

Multi ​

html
<div class="ui-range accent-warning">
    <input type="range" value="0" step="100" max="10000" min="0" id="range-from" aria-labelledby="from">
    <input type="range" value="10000" step="100" max="10000" min="0" id="range-to" aria-labelledby="to">
</div>

<div class="flex-between items-center">
    <output class="before:content-[attr(data-unit)]" data-unit="$" aria-label="Price from" id="from">0</output>
    <output class="before:content-[attr(data-unit)]" data-unit="$" aria-label="Price to" id="to">10 000</output>
</div>
liquid
<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/ui/range/index.js'

    const rangeFrom = document.querySelector('#range-from')
    const rangeTo = document.querySelector('#range-to')

    const setFromValue = ({ currentTarget }) => {
        setValue(currentTarget)

        setOutputValue(currentTarget, document.querySelector('#from'))
    }

    const setToValue = ({ currentTarget }) => {
        setValue(currentTarget, {
            track: 'end'
        })

        setOutputValue(currentTarget, document.querySelector('#to'))
    }



    setFromValue({ currentTarget: rangeFrom })
    rangeFrom.addEventListener('input', setFromValue)

    setToValue({ currentTarget: rangeTo })
    rangeTo.addEventListener('input', setToValue)
</script>

Vertical ​

html
<div class="ui-range vertical h-48">
    <input type="range" value="0" step="10" max="100" min="0" aria-labelledby="single" id="range-single">
</div>

<output class="before:content-[attr(data-unit)]" data-unit="$" aria-label="Price" id="single">10 000</output>
liquid
<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/ui/range/index.js'

    const rangeSingle = document.querySelector('#range-single')

    const setSingleValue = ({ currentTarget }) => {
        setValue(currentTarget)

        setOutputValue(currentTarget, document.querySelector('#single'))
    }

    setSingleValue({ currentTarget: rangeSingle })
    rangeSingle.addEventListener('input', setSingleValue)
</script>

Javascript API ​

setTrackProperty ​

  • Type: (options: TrackOptions, track: 'start' | 'end') => void
  • Kind: sync

TrackOptions ​


element ​
  • Type: HTMLElement | Element
  • Default: undefined

value ​
  • Type: string
  • Default: undefined

max ​
  • Type: number
  • Default: undefined


setValue ​

  • Type: (target: HTMLInputElement, options: DefaultOptions) => void
  • Kind: sync

DefaultOptions ​


selector ​
  • Type: string
  • Default: .ui-range

track ​
  • Type: string
  • Default: 'start' | 'end'


setOutputValue ​

  • Type: (target: HTMLInputElement, options: OutputOptions) => void
  • Kind: sync

OutputOptions ​


element ​
  • Type: HTMLOutputElement
  • Default: null

lang ​
  • Type: string
  • Default: document.documentElement.lang

formatOptions ​
  • Type: Intl.NumberFormatOptions
  • Default: { style: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 }

Released under the MIT License.