CODEWITHSUNDEEP
htmlcssreactjstailwind-css
wyc
wyc

Reputation: 55303

Can't add border with &::-webkit-slider-thumb

This is the code I'm using to style my range slider:

<input
  id="custom-range-slider"
  type="range"
  min={min}
  max={max}
  step={step}
  value={currentValue}
  onChange={handleChange}
  disabled={disabled}
  className={cn(
    // Base slider styles
    'w-full cursor-pointer appearance-none bg-transparent focus:outline-none',
    // Disabled state
    'disabled:pointer-events-none disabled:opacity-50',
    // WebKit thumb styles (Chrome, Safari, Edge)
    '[&::-webkit-slider-thumb]:-mt-0.5',
    '[&::-webkit-slider-thumb]:h-4',
    '[&::-webkit-slider-thumb]:w-4',
    '[&::-webkit-slider-thumb]:appearance-none',
    '[&::-webkit-slider-thumb]:rounded-full',
    '[&::-webkit-slider-thumb]:bg-white',
    '[&::-webkit-slider-thumb]:border-2', // Add border
    '[&::-webkit-slider-thumb]:border-blue-600', // Border color
    '[&::-webkit-slider-thumb]:shadow-md', // Add shadow
    '[&::-webkit-slider-thumb]:shadow-blue-300', // Customize shadow color if needed
    '[&::-webkit-slider-thumb]:transition-all',
    '[&::-webkit-slider-thumb]:duration-150',
    '[&::-webkit-slider-thumb]:ease-in-out',
    // Firefox thumb styles
    '[&::-moz-range-thumb]:h-4',
    '[&::-moz-range-thumb]:w-4',
    '[&::-moz-range-thumb]:appearance-none',
    '[&::-moz-range-thumb]:rounded-full',
    '[&::-moz-range-thumb]:border-4',
    '[&::-moz-range-thumb]:border-blue-600', // Add border color
    '[&::-moz-range-thumb]:bg-white',
    '[&::-moz-range-thumb]:shadow-md', // Add shadow for Firefox
    '[&::-moz-range-thumb]:shadow-blue-300', // Customize shadow color if needed
    '[&::-moz-range-thumb]:transition-all',
    '[&::-moz-range-thumb]:duration-150',
    '[&::-moz-range-thumb]:ease-in-out',
    // WebKit track styles (Chrome, Safari, Edge)
    '[&::-webkit-slider-runnable-track]:h-2',
    '[&::-webkit-slider-runnable-track]:w-full',
    '[&::-webkit-slider-runnable-track]:rounded-full',
    '[&::-webkit-slider-runnable-track]:bg-gray-100',
    // Firefox track styles
    '[&::-moz-range-track]:h-2',
    '[&::-moz-range-track]:w-full',
    '[&::-moz-range-track]:rounded-full',
    '[&::-moz-range-track]:bg-gray-100',
  )}

In Firefox, the border is being styled:

enter image description here

But not in Chrome:

enter image description here

https://play.tailwindcss.com/5lrlPTdgfG

Why is this and how to fix it?

Note: I want to keep the shadow.

Upvotes: 0

Views: 46

Answers (1)

A Haworth
A Haworth

Reputation: 36605

I can't explain the discrepancy between Chrome and FF, but adding [&amp;::-webkit-slider-thumb]:border-solid seems to restore the border.

This seems reasonably logical since appearance: none has been applied which I imagine removes the default border setting.

Upvotes: 1

Related Questions