# Slider

An input where the user selects a value from within a given range.

## Usage

Use standalone.
```svelte
<Slider {...props} />
```

## Anatomy

The `class` attribute values represent part names, and `conditional` indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

```svelte
<span class="whole">
  <span class="left">{left}</span>
  <input class="main" {...rest} type="range" {min} {max} />
  <datalist conditional>
    {#each options as option}
      <option value={option}></option>
    {/each}
  </datalist>
  <span class="right" conditional>{right}</span>
</span>
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `min*` | `number` | - | Lower range bound of the slider |
| `max*` | `number` | - | Upper range bound of the slider |
| `left` | `Snippet` | - | Content before the input; receives value, variant, and input element |
| `right` | `Snippet` | - | Content after the input; receives value, variant, and input element |
| `value` | `number` | `min+((max-min)/2)` | Bindable slider value |
| `step` | `number` | `1` | Increment between valid values; can also be `"any"` |
| `options` | `SvelteSet` | - | Numeric datalist suggestions |
| `fillRange` | `Range` | `{ min: 5, max: 95 }` | Controls the rate limits for the `linear-gradient` track fill |
| `cssvar` | `Record` | - | Renames the custom properties the gradient reads |
| `attach` | `Attachment` | - | Svelte attachment on the input |
| `element` | `HTMLInputElement` | - | Bindable input element |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Variant |
`*` required. Other `HTMLInputAttributes` are passed to `<input>` via rest props; `class` is merged onto the control.

When `appearance` is set to `none`, the `background-color` is used by default to style the `input` element's track. In this case, different colors are applied to the left and right sides of the thumb. This behavior is controlled using Svelte's reactive functionality. `--color-active` is applied to the left of the thumb and `--color-inactive` to the right; these are intentionally not `--svs-`-prefixed so a Tailwind theme color named `active` / `inactive` is picked up automatically, and `cssvar` can rename them. To disable this behavior, override the `background-color` property of the `input` element using `!important`.

## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-slider`

## Behavior

`--color-active` / `--color-inactive` are intentionally not `--svs-`-prefixed so a Tailwind theme color named `active`/`inactive` is picked up with no extra wiring.

## Accessibility

### ARIA Roles and Attributes

The component does not apply managed ARIA attributes automatically; the native range input exposes its value semantics.

Provide an accessible name yourself because there is no built-in visible label. Pass `aria-label` or `aria-labelledby` through the rest props, or associate a `<label>` with the range input.

### Standards Basis

Slider is built on a native `<input type="range">`, so keyboard and assistive-technology support follows the browser standard for range inputs, including arrow-key and Home / End value changes. See the [Concepts standards-first guidance](/docs/concepts) for the library's approach.

## Exports

### Types

```ts
type Range = { min: number; max: number };
type SliderCssVar = "active" | "inactive";
interface SliderProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "list" | "style"> {
  min: number;
  max: number;
  left?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
  right?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
  value?: number; // bindable (min+((max-min)/2))
  step?: number | "any"; // (1)
  options?: SvelteSet<number> | Set<number>;
  fillRange?: Range; // ({ min: 5, max: 95 }); linear-gradient rate limit of slider's track
  cssvar?: Partial<Record<SliderCssVar, string>>;
  attach?: Attachment<HTMLInputElement>;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
  // style is component-owned (omitted)
}
type SliderReqdProps = "min" | "max";
type SliderBindProps = "value" | "element";
```

### Others

No additional exports are available.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=SliderBasic.svelte
<script lang="ts">
  import { Slider } from "svseeds";

  const styling = {
    whole: "flex w-30 h-2",
    main: [
      "w-full h-2 appearance-none",
      "[&::-webkit-slider-runnable-track]:h-2",
      "[&::-webkit-slider-thumb]:appearance-none",
      "[&::-webkit-slider-thumb]:w-4",
      "[&::-webkit-slider-thumb]:h-2",
      "[&::-webkit-slider-thumb]:bg-teal-800",
      "[&::-webkit-slider-thumb]:transition-transform",
      "[&::-webkit-slider-thumb]:duration-100",
      "hover:[&::-webkit-slider-thumb]:scale-125",
      "[&::-moz-range-track]:h-2",
      "[&::-moz-range-thumb]:border-none",
      "[&::-moz-range-thumb]:w-4",
      "[&::-moz-range-thumb]:h-2",
      "[&::-moz-range-thumb]:bg-teal-800",
      "[&::-moz-range-thumb]:transition-transform",
      "[&::-moz-range-thumb]:duration-100",
      "hover:[&::-moz-range-thumb]:scale-125",
    ],
  };
  const myProps = {
    min: 0,
    max: 100,
    styling,
  };
</script>

<Slider {...myProps} />
```
### With Interactive Variant

**Code**

```svelte src=SliderPract.svelte
<script lang="ts">
  import { Slider } from "svseeds";

  let { variant = $bindable() } = $props();
  const variantStyle1 = {
    neutral: "[--color-accent:oklch(55.2%_0.016_285.938)]",
    active: "[--color-accent:oklch(60%_0.118_184.704)]",
    inactive: "[--color-accent:oklch(57.7%_0.245_27.325)]",
    blue: "[--color-accent:oklch(54.6%_0.245_262.881)]",
    yellow: "[--color-accent:oklch(68.1%_0.162_75.834)]",
    sky: "[--color-accent:oklch(58.8%_0.158_241.966)]",
  };
  const styling = {
    whole: {
      base: "flex w-30 h-2",
      ...variantStyle1,
    },
    main: [
      "w-full h-2 rounded-sm appearance-none",
      "[&::-webkit-slider-runnable-track]:h-2",
      "[&::-webkit-slider-thumb]:appearance-none",
      "[&::-webkit-slider-thumb]:w-2",
      "[&::-webkit-slider-thumb]:h-2",
      "[&::-webkit-slider-thumb]:rounded-full",
      "[&::-webkit-slider-thumb]:border-2",
      "[&::-webkit-slider-thumb]:border-gray-500",
      "[&::-webkit-slider-thumb]:bg-(--color-accent)",
      "[&::-webkit-slider-thumb]:transition-transform",
      "[&::-webkit-slider-thumb]:duration-100",
      "[&::-webkit-slider-thumb]:scale-200",
      "hover:[&::-webkit-slider-thumb]:scale-225",
      "[&::-moz-range-track]:h-2",
      "[&::-moz-range-thumb]:w-2",
      "[&::-moz-range-thumb]:h-2",
      "[&::-moz-range-thumb]:rounded-full",
      "[&::-moz-range-thumb]:border-2",
      "[&::-moz-range-thumb]:border-gray-500",
      "[&::-moz-range-thumb]:bg-(--color-accent)",
      "[&::-moz-range-thumb]:transition-transform",
      "[&::-moz-range-thumb]:duration-100",
      "[&::-moz-range-thumb]:scale-200",
      "hover:[&::-moz-range-thumb]:scale-225",
    ],
  };
  const myProps = {
    min: 0,
    max: 100,
    cssvar: { active: "--color-accent" },
    styling,
  };
</script>

<Slider {variant} {...myProps} />
```