# rangeThumbAppearance

> The `rangeThumbAppearance()` style-mixin factory: the circular thumb a native `<input type="range">` paints through its own `::-webkit-slider-thumb` and `::-moz-range-thumb` pseudo-elements — the appearance reset, fill and border colors, elevation shadow, pressed scale, focus-visible ring, and disabled dimming shared by every single-channel range control in the catalog, whichever pair of custom properties that control reads its own thumb size and border width from.

```ts
import { rangeThumbAppearance } from "@sdxc/ui/styles";
```

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

```ts
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

```tsx
<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
		}),
	]}
/>;
```