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 */
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 {
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
@apply h-1 bg-orange-300 rounded-full;
}
/* 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 {
@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 */

View file

@ -206,7 +206,7 @@ export default function MiiInstructions({ instructions }: Props) {
</label>
<div className="relative h-5 flex justify-center items-center">
<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>
)}
@ -217,7 +217,7 @@ export default function MiiInstructions({ instructions }: Props) {
</label>
<div className="relative h-5 flex justify-center items-center">
<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>
)}

View file

@ -33,7 +33,7 @@ export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
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>
))}

View file

@ -67,7 +67,7 @@ export default function HeadTab({ instructions }: Props) {
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>
@ -89,7 +89,7 @@ export default function HeadTab({ instructions }: Props) {
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>