Slider

---
import { Slider } from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-slider-opacity">Opacity</label>
  <Slider id="ex-slider-opacity" name="opacity" min="0" max="100" value="80" aria-describedby="ex-slider-opacity-value" />
  <output id="ex-slider-opacity-value" for="ex-slider-opacity" aria-live="polite">80</output>

  <label for="ex-slider-volume">Volume</label>
  <Slider id="ex-slider-volume" name="volume" min="0" max="100" step="5" value="45" />
</div>

<script>
  const slider = document.querySelector<HTMLInputElement>('#ex-slider-opacity')
  const output = document.querySelector<HTMLOutputElement>('#ex-slider-opacity-value')

  if (slider && output) {
    const updateValue = () => {
      output.value = slider.value

      output.textContent = slider.value
    }

    updateValue()

    slider.addEventListener('input', updateValue)
  }
</script>

import { Slider } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '20rem' }}>
      <label htmlFor="ex-slider-opacity">Opacity</label>
      <Slider id="ex-slider-opacity" name="opacity" min="0" max="100" defaultValue="80" aria-describedby="ex-slider-opacity-value" />
      <output id="ex-slider-opacity-value" htmlFor="ex-slider-opacity" aria-live="polite">80</output>

      <label htmlFor="ex-slider-volume">Volume</label>
      <Slider id="ex-slider-volume" name="volume" min="0" max="100" step="5" defaultValue="45" />
    </div>

    <script>
      const slider = document.querySelector<HTMLInputElement>('#ex-slider-opacity')
      const output = document.querySelector<HTMLOutputElement>('#ex-slider-opacity-value')

      if (slider && output) {
        const updateValue = () => {
          output.value = slider.value

          output.textContent = slider.value
        }

        updateValue()

        slider.addEventListener('input', updateValue)
      }
    </script>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-slider-opacity">Opacity</label>
  <lumen-slider id="ex-slider-opacity" name="opacity" min="0" max="100" value="80" aria-describedby="ex-slider-opacity-value"></lumen-slider>
  <output id="ex-slider-opacity-value" for="ex-slider-opacity" aria-live="polite">80</output>

  <label for="ex-slider-volume">Volume</label>
  <lumen-slider id="ex-slider-volume" name="volume" min="0" max="100" step="5" value="45"></lumen-slider>
</div>

<script>
  const slider = document.querySelector<HTMLInputElement>('#ex-slider-opacity')
  const output = document.querySelector<HTMLOutputElement>('#ex-slider-opacity-value')

  if (slider && output) {
    const updateValue = () => {
      output.value = slider.value

      output.textContent = slider.value
    }

    updateValue()

    slider.addEventListener('input', updateValue)
  }
</script>