27 lines
3.4 KiB
HTML
27 lines
3.4 KiB
HTML
<div class="flex w-full flex-col text-on-surface dark:text-on-surface-dark">
|
|
<label for="rangeSlider" class="w-fit pl-0.5 text-sm">Mood Meter</label>
|
|
<input id="rangeSlider" type="range" class="z-10 mb-1 mt-4 h-2 w-full appearance-none bg-on-surface/15 focus:outline-primary dark:bg-on-surface-dark/15 dark:focus:outline-primary-dark [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-primary active:[&::-moz-range-thumb]:scale-110 dark:[&::-moz-range-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-primary active:[&::-webkit-slider-thumb]:scale-110 dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="5" />
|
|
<div class="flex items-center justify-between px-2 text-center text-on-surface dark:text-on-surface-dark">
|
|
<span class="w-0 -translate-x-1 text-xs even:hidden md:even:inline-block" aria-hidden="true">0</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
|
|
<span class="w-0 -translate-x-2 text-xs even:hidden md:even:inline-block" aria-hidden="true">100</span>
|
|
</div>
|
|
</div> |