fix: input range thumb off center

This commit is contained in:
trafficlunar 2026-04-06 14:27:45 +01:00
parent 14c992a9ce
commit c45c51fa31
4 changed files with 9 additions and 9 deletions

View file

@ -126,20 +126,20 @@ input[type="range"] {
/* Track */ /* Track */
input[type="range"]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full; @apply h-1 bg-orange-300 rounded-full;
} }
input[type="range"]::-moz-range-track { input[type="range"]::-moz-range-track {
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full; @apply h-1 bg-orange-300 rounded-full;
} }
/* Thumb */ /* Thumb */
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
@apply appearance-none size-4 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition -mt-1.5; @apply appearance-none size-4 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition -mt-1.5;
} }
input[type="range"]::-moz-range-thumb { input[type="range"]::-moz-range-thumb {
@apply size-3.5 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition; @apply size-3.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition;
} }
/* Hover */ /* Hover */

View file

@ -206,7 +206,7 @@ export default function MiiInstructions({ instructions }: Props) {
</label> </label>
<div className="relative h-5 flex justify-center items-center"> <div className="relative h-5 flex justify-center items-center">
<input id="height" type="range" min={0} max={128} step={1} disabled value={height} /> <input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div> <div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
</div> </div>
</div> </div>
)} )}
@ -217,7 +217,7 @@ export default function MiiInstructions({ instructions }: Props) {
</label> </label>
<div className="relative h-5 flex justify-center items-center"> <div className="relative h-5 flex justify-center items-center">
<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} /> <input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div> <div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
</div> </div>
</div> </div>
)} )}

View file

@ -33,7 +33,7 @@ export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
if (onChange) onChange(e, label.toLowerCase()); if (onChange) onChange(e, label.toLowerCase());
}} }}
/> />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div> <div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
</div> </div>
</div> </div>
))} ))}

View file

@ -67,7 +67,7 @@ export default function HeadTab({ instructions }: Props) {
instructions.current.height = e.target.valueAsNumber; instructions.current.height = e.target.valueAsNumber;
}} }}
/> />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div> <div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
</div> </div>
</div> </div>
@ -89,7 +89,7 @@ export default function HeadTab({ instructions }: Props) {
instructions.current.weight = e.target.valueAsNumber; instructions.current.weight = e.target.valueAsNumber;
}} }}
/> />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div> <div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
</div> </div>
</div> </div>