Components

Slider

(external link)

ld-slider #

The ld-slider component can be used to select a single numeric value or a range of numeric values.

Default #

<ld-slider></ld-slider>

<LdSlider />

Predefined value #

<ld-slider value="40"></ld-slider>

<LdSlider value="40" />

Custom min/max values #

<ld-slider min="-50" max="50"></ld-slider>

<LdSlider min={-50} max={50} />

Size #

<ld-slider size="sm"></ld-slider>
<ld-slider></ld-slider>
<ld-slider size="lg"></ld-slider>

<LdSlider size="sm" />
<LdSlider />
<LdSlider size="lg" />

Disabled #

<ld-slider disabled value="40"></ld-slider>
<ld-slider aria-disabled="true" value="40"></ld-slider>

<LdSlider disabled value={40} />
<LdSlider aria-disabled="true" value={40} />

Custom steps #

<ld-slider step="5"></ld-slider>

<LdSlider step={5} />

Custom stops #

Custom stops behave just like steps, but without the need for an even distance between them.

<ld-slider stops="20,35,45,60,85"></ld-slider>

<LdSlider stops="20,35,45,60,85" />

Use the prop snap-offset="0" to just add the labels for the custom stops without forcing them to behave like steps.

With step/stop indicators #

<ld-slider indicators step="10"></ld-slider>
<ld-slider indicators stops="20,35,45,60,85"></ld-slider>

<LdSlider indicators step={10} />
<LdSlider indicators stops="20,35,45,60,85" />

With step/stop snapping #

<ld-slider indicators snap-offset="2" step="10"></ld-slider>
<ld-slider snap-offset="2" stops="20,35,45,60,85"></ld-slider>

<LdSlider indicators snapOffset={2} step={10} />
<LdSlider snapOffset={2} stops="20,35,45,60,85" />

Use the keyboard arrows ← → ↑ ↓ or click on the track to select values near the snap-points.

Multiple values #

You can add 2 or more comma-separated values to the slider. This results in additional thumbs being added.

<ld-slider value="40,90"></ld-slider>
<ld-slider value="30,60,90"></ld-slider>
<ld-slider value="20,50,70,90"></ld-slider>

<LdSlider value="40,90" />
<LdSlider value="30,60,90" />
<LdSlider value="20,50,70,90" />

Swappable mode #

The swappable mode allows swapping the thumbs.

<ld-slider swappable value="40,90"></ld-slider>

<LdSlider swappable value="40,90" />

Hide values #

<ld-slider hide-values value="40,90"></ld-slider>

<LdSlider hideValues value="40,90" />

Hide value labels #

<ld-slider hide-value-labels value="40,90"></ld-slider>

<LdSlider hideValueLabels value="40,90" />

Hide stop labels #

<ld-slider hide-stop-labels indicators stops="20,40,60,90" value="40,90"></ld-slider>

<LdSlider hideStopLabels indicators stops="20,40,60,90" value="40,90" />

Units #

<ld-slider unit="%"></ld-slider>
<ld-slider unit=" px" stops="24,64,96" max="128"></ld-slider>

<LdSlider unit="%" />
<LdSlider unit=" px" stops="24,64,96" max={128} />

Negative #

The negative mode highlights deselected ranges as selected and vice versa.

<ld-slider negative value="50"></ld-slider>
<ld-slider negative value="40,90"></ld-slider>

<LdSlider negative value={50} />
<LdSlider negative value="40,90" />

Custom width #

By default, the ld-slider applies a width of 100%. You can set it to any fixed width using the width prop.

<ld-slider width="20rem"></ld-slider>

<LdSlider width="20rem" />

A relative width below 100% is not supported, but you can work around this by wrapping the component in a container and give that container any width you like.

Be aware that you also need to do this, if you want to use the ld-slider inside a flexbox container.

Integration #

<div class="flex">
  <ld-input id="from" type="number" value="40"></ld-input>
  <ld-slider id="slider1" value="40,90" width="20rem"></ld-slider>
  <ld-input id="to" type="number" value="90"></ld-input>
</div>

<div class="flex">
  <ld-button id="minus">-</ld-button>
  <ld-slider id="slider2" value="40" width="20rem"></ld-slider>
  <ld-button id="plus">+</ld-button>
</div>

<style>
  .flex {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ld-sp-8);
    justify-content: center;
  }

  #from, #to, #minus, #plus {
    flex: 0 0 auto;
    margin-bottom: 1.125rem;
    width: 3rem;
  }

  #from::part(input), #to::part(input) {
    text-align: center;
  }
</style>

<script>
  const slider1 = document.getElementById('slider1')
  const slider2 = document.getElementById('slider2')
  const from = document.getElementById('from')
  const to = document.getElementById('to')
  const minus = document.getElementById('minus')
  const plus = document.getElementById('plus')
  const handleInput = (event) => {
    if (!from.value || !to.value) {
      return
    }
    slider1.value = [from.value, to.value].join(',')
  }

  slider1.addEventListener('ldchange', (event) => {
    const [newFrom, newTo] = event.detail

    from.value = newFrom
    to.value = newTo
  })
  from.addEventListener('input', handleInput)
  to.addEventListener('input', handleInput)

  slider2.addEventListener('ldchange', (event) => {
    const [newValue] = event.detail

    if (newValue === 0) {
      minus.disabled = true
    } else {
      minus.disabled = false
    }

    if (newValue === 100) {
      plus.disabled = true
    } else {
      plus.disabled = false
    }
  })
  minus.addEventListener('click', () => {
    const currValue = Number.parseInt(slider2.value)
    if (currValue <= 0) return
    slider2.value = String(currValue - 1)
  })
  plus.addEventListener('click', () => {
    const currValue = Number.parseInt(slider2.value)
    if (currValue >= 100) return
    slider2.value = String(currValue + 1)
  })
</script>

const [from, setFrom] = useState(40)
const [to, setTo] = useState(90)
const [value, setValue] = useState(40)

return (
  <>
    <div className="flex">
      <LdInput
        onLdchange={({ detail }) => setFrom(Number.parseInt(detail))}
        type="number"
        value={`${from}`}
      />
      <LdSlider
        onLdchange={(event) => {
          const [newFrom, newTo] = event.detail

          setFrom(newFrom)
          setTo(newTo)
        }}
        value={`${from},${to}`}
        width="20rem"
      />
      <LdInput
        onLdchange={({ detail }) => setTo(Number.parseInt(detail))}
        type="number"
        value={`${to}`}
      />
    </div>

    <div className="flex">
      <LdButton
        onClick={() => {
          if (value <= 0) return
          setValue((value) => value - 1)
        }}
      >
        -
      </LdButton>
      <LdSlider
        onLdchange={({ detail }) => setValue(detail[0])}
        value={`${value}`}
        width="20rem"
      />
      <LdButton
        onClick={() => {
          if (value >= 100) return
          setValue((value) => value + 1)
        }}
      >
        +
      </LdButton>
    </div>

    <style>{`
      .flex {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: var(--LdSp-8);
        justify-content: center;
      }

      #from, #to, #minus, #plus {
        flex: 0 0 auto;
        margin-bottom: 1.125rem;
        width: 3rem;
      }

      #from::part(input), #to::part(input) {
        text-align: center;
      }
    `}</style>
  </>
)

Properties #

Property	Attribute	Description	Type	Default
`ariaDisabled`	`aria-disabled`	Alternative disabled state that keeps element focusable	`string`	`undefined`
`disabled`	`disabled`	Disabled state of the slider	`boolean`	`false`
`hideStopLabels`	`hide-stop-labels`	Prevents rendering of the stop labels below the slider	`boolean`	`false`
`hideValueLabels`	`hide-value-labels`	Prevents rendering of the value labels below the slider	`boolean`	`false`
`hideValues`	`hide-values`	Makes the current values only visible on interaction	`boolean`	`false`
`indicators`	`indicators`	Specifies the legal number intervals	`boolean`	`false`
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`labelFrom`	`label-from`	"From" value label (when exactly 2 values are given)	`string`	`'From'`
`labelTo`	`label-to`	"To" value label (when exactly 2 values are given)	`string`	`'To'`
`labelValue`	`label-value`	"Value" label (when exactly 2 values are given)	`string`	`'Value'`
`ldTabindex`	`ld-tabindex`	Tab index of the input(s).	`number`	`undefined`
`max`	`max`	Specifies the maximum value allowed	`number`	`100`
`min`	`min`	Specifies the minimum value allowed	`number`	`0`
`negative`	`negative`	Swap which areas are being marked as selected and deselected	`boolean`	`false`
`ref`	`ref`	reference to component	`any`	`undefined`
`size`	`size`	Size of the thumb(s).	`"lg" \| "sm"`	`undefined`
`snapOffset`	`snap-offset`	Offset inside which a thumb snaps to a stop point	`number`	`undefined`
`step`	`step`	Specifies the legal number intervals	`number`	`undefined`
`stops`	`stops`	Adds custom stop points to the slider (instead of steps)	`string`	`undefined`
`swappable`	`swappable`	Allows swapping of thumbs	`boolean`	`false`
`unit`	`unit`	Adds custom stop points to the slider (instead of steps)	`string`	`undefined`
`value`	`value`	Specifies the default value	`number \| number[] \| string`	`this.min`
`width`	`width`	Width of the slider	`string`	`'100%'`

Events #

Event	Description	Type
`ldchange`		`CustomEvent<number[]>`

Methods #

`focusInner() => Promise<void>` #

Focuses the toggle

Returns #

Type: Promise<void>

Shadow Parts #

Part	Description
`"focusable"`
`"indicator"`	Stop/step indicator div elements
`"input"`	`input` elements
`"label"`	`ld-sr-only` elements labelling an input
`"output"`	`output` elements
`"value-label"`	`div` element containing the max/min/stops values + unit

Dependencies #

Depends on #

ld-sr-only

Graph #

graph TD;
  ld-slider --> ld-sr-only
  style ld-slider fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS