<label class="block">
    <input class="form-range text-slate-500 dark:text-navy-300" type="range" />
  </label>

              

                
  <label class="block">
    <input
      value="50"
      class="form-range text-primary dark:text-accent"
      type="range"
    />
  </label>
  <label class="block">
    <input
      value="50"
      class="form-range text-secondary dark:text-secondary-light"
      type="range"
    />
  </label>
  <label class="block">
    <input value="50" class="form-range text-info" type="range" />
  </label>
  <label class="block">
    <input value="50" class="form-range text-success" type="range" />
  </label>
  <label class="block">
    <input value="50" class="form-range text-warning" type="range" />
  </label>
  <label class="block">
    <input value="50" class="form-range text-error" type="range" />
  </label>
              

                
  <label class="block">
    <input
      class="form-range text-slate-500 [--range-track-h:3px] [--range-thumb-size:12px] dark:text-navy-300"
      type="range"
    />
  </label>
  <label class="block">
    <input class="form-range text-slate-500 dark:text-navy-300" type="range" />
  </label>
  <label class="block">
    <input
      class="form-range text-slate-500 [--range-track-h:8px] [--range-thumb-size:24px] dark:text-navy-300"
      type="range"
    />
  </label>

              

                
  <div x-data="{range:50}">
    <div class="flex justify-between">
      <span>0</span>
      <span>100</span>
    </div>
    <label class="block">
      <input
        x-model="range"
        class="form-range text-slate-500 dark:text-navy-300"
        type="range"
      />
    </label>
    <div class="mt-2">
      <p>Value: <span x-text="range"></span></p>
    </div>
  </div>