# CategorySlider

> Focusable keyboard layer laid over the drawing.

Source: https://ui.jcsoftdev.com/docs/components/category-slider

Focusable keyboard layer laid over the drawing. It ignores the pointer
(`pointer-events: none`), so hovering still reaches the marks underneath.

## Import

```ts
import { CategorySlider } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
export const Default: Story = { render: () => <Demo /> };
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `explorer` * | `CategoryExplorer` |  |  |
| `label` * | `string` |  |  |
| `count` * | `number` |  |  |
| `valueText` * | `string` |  | What a screen reader hears for the current category. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-categoryslider--default)

## Source

`packages/ui/src/charts/core/category-explorer.tsx`