File
src/components/ui/slider.jsx
Description
The Slider component only styles the range input's thumb using the Webkit-specific pseudo-element:
"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full",
::-webkit-slider-thumb only applies in Chromium/Safari-based browsers. Firefox uses a separate pseudo-element, ::-moz-range-thumb, which is never targeted here. As a result, the slider thumb falls back to the browser's default unstyled appearance on Firefox, breaking the intended design.
Steps to Reproduce
- Open any page using the
Slider component in Firefox.
- Compare the slider thumb to how it renders in Chrome/Edge/Safari.
- Observe the thumb is unstyled (default OS/browser appearance) in Firefox instead of the custom circular primary-colored thumb.
Expected Behavior
The slider thumb should render consistently across browsers — same size, color, and shape in Firefox as in Webkit-based browsers.
Suggested Fix
Add the Firefox-equivalent thumb styling alongside the existing Webkit classes:
className={cn(
"w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer",
"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full",
+ "[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
className
)}The extra border-0 on the Firefox variant is needed because ::-moz-range-thumb has a default border that Webkit's thumb doesn't, which would otherwise make the thumb look inconsistent between browsers even after matching size/color/radius.
File
src/components/ui/slider.jsxDescription
The
Slidercomponent only styles the range input's thumb using the Webkit-specific pseudo-element:::-webkit-slider-thumbonly applies in Chromium/Safari-based browsers. Firefox uses a separate pseudo-element,::-moz-range-thumb, which is never targeted here. As a result, the slider thumb falls back to the browser's default unstyled appearance on Firefox, breaking the intended design.Steps to Reproduce
Slidercomponent in Firefox.Expected Behavior
The slider thumb should render consistently across browsers — same size, color, and shape in Firefox as in Webkit-based browsers.
Suggested Fix
Add the Firefox-equivalent thumb styling alongside the existing Webkit classes:
className={cn( "w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer", "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full", + "[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0", className )}The extra
border-0on the Firefox variant is needed because::-moz-range-thumbhas a default border that Webkit's thumb doesn't, which would otherwise make the thumb look inconsistent between browsers even after matching size/color/radius.