range slider

slider.html

<label for="large-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
  Large range
</label>
<input id="large-range" type="range" value="50" 
  class="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">

<style>
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 9999px;
    background: #3b82f6; /* Tailwind blue-500 */
    cursor: pointer;
    margin-top: -10px; /* uitlijnen met track */
  }

  input[type="range"]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 9999px;
    background: #3b82f6;
    cursor: pointer;
  }
</style>