Range

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

View Source 

Usage

css

@import "winduum/src/components/range/index.css" layer(components);

js

import { setValue } from 'winduum/src/components/range'

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

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

Variants

• default
• multi

Props

• default 

Tokens

• vertical

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 
• winduum-stimulus 

Examples

Default

html

<div class="x-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>

js

<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/components/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>

vue

<script setup lang="ts">
    import { Range } from '@/components/range'
</script>

<template>
    <Range>
        <input type="range" value="0" step="10" max="100" min="0" aria-labelledby="single" id="range-single">
    </Range>
</template>

jsx

import { Range } from '@/components/range'

export function Example() {
    return (
        <Range>
            <input type="range" value="0" step="10" max="100" min="0" aria-labelledby="single" id="range-single" />
        </Range>
    )
}

Multi

html

<div class="x-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>

js

<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/components/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="x-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>

js

<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/components/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

---

min

• Type: number
• Default: undefined

---

max

• Type: number
• Default: undefined

---

setValue

• Type: (element: HTMLInputElement, options: SetValueOptions) => void
• Kind: sync

DefaultOptions

---

selector

• Type: string
• Default: .x-range

---

track

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

---

setOutputValue

• Type: (element: HTMLInputElement, options: SetOutputOptions) => void
• Kind: sync

SetOutputOptions

---

lang

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

---

formatOptions

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