[ @sdxc/ui/styles ]
rangeThumbAppearance
The rangeThumbAppearance() style-mixin factory.
import { rangeThumbAppearance } from "@sdxc/ui/styles";Usage
Composes the range thumb's shared appearance recipe — reset, shape, border, fill, shadow, pressed scale, focus ring, and disabled dimming — identical across every control except the size and border-width properties given here.
Signature
rangeThumbAppearance<Node extends Element = Element>(sizeVariable: string, borderWidthVariable: string): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>Returns a mixin ready for a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
sizeVariable | string | Custom property (with its leading --) the thumb reads its own inline and block size from, falling back to 1.25rem. |
borderWidthVariable | string | Custom property (with its leading --) the thumb reads its own border width from, falling back to 2px. |
Examples
<input
type="range"
mix={[
rangeThumbAppearance("--ui-slider-thumb-size", "--ui-slider-thumb-border-width"),
css({
position: "absolute",
inset: "0",
// ...the control's own reset and track declarations
}),
]}
/>;