ld-slider #

<ld-slider></ld-slider>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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