## `<w-slider>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| _label (JS only) | `unknown` | `-` | - |
| disabled | `boolean` | `false` | - |
| error | `string \| undefined` | `-` | Validation error text, if any |
| help-text | `string \| undefined` | `-` | Additional description to show below the fieldset |
| helpTextSlotChange (JS only) | `helpTextSlotChange() => void` | `-` | - |
| hidden-textfield | `boolean` | `false` | Should only be used in special cases |
| invalid | `boolean` | `false` | Sets the form fields and fieldset in an invalid state |
| label | `string \| undefined` | `-` | The slider fieldset label. Required for proper accessibility. |
| labelFormatter (JS only) | `((slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the min and max labels below the range. |
| markers | `number \| undefined` | `-` | Pass a value similar to step to create visual markers at that interval |
| max | `string \| undefined` | `100` | The maximum allowed value in the range inputs |
| min | `string \| undefined` | `0` | The minimum allowed value in the range inputs |
| open-ended | `boolean` | `false` | Whether or not to allow values outside the range such as "Before 1950" and "2025+". |
| optional | `boolean` | `false` | Whether to show the optional indicator after the label. |
| required | `boolean` | `false` | Ensures a child slider thumb has a value before allowing the containing form to submit |
| step | `number \| undefined` | `-` | ets step on the range input to jump between values when dragging |
| suffix | `string \| undefined` | `-` | Suffix used in text input fields and for the min and max values of the slider |
| tooltip | `string \| undefined` | `-` | Supplementary information that should show in a tooltip behind an information icon after the label. |
| tooltipFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Overrides valueFormatter for the tooltip. |
| valueFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the tooltip and input mask values |

### Property Details

#### _label (JS only)



- Type: `unknown`
- Default: `-`

#### disabled



- Type: `boolean`
- Default: `false`

#### error

Validation error text, if any

- Type: `string | undefined`
- Default: `-`

#### help-text

Additional description to show below the fieldset

- Type: `string | undefined`
- Default: `-`

#### helpTextSlotChange (JS only)



- Type: `helpTextSlotChange() => void`
- Default: `-`

#### hidden-textfield

Should only be used in special cases

- Type: `boolean`
- Default: `false`

#### invalid

Sets the form fields and fieldset in an invalid state

- Type: `boolean`
- Default: `false`

#### label

The slider fieldset label. Required for proper accessibility.

If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)

- Type: `string | undefined`
- Default: `-`

#### labelFormatter (JS only)

Formatter for the min and max labels below the range.

- Type: `((slot: SliderSlot) => string) | undefined`
- Default: `-`

#### markers

Pass a value similar to step to create visual markers at that interval

- Type: `number | undefined`
- Default: `-`

#### max

The maximum allowed value in the range inputs

- Type: `string | undefined`
- Default: `100`

#### min

The minimum allowed value in the range inputs

- Type: `string | undefined`
- Default: `0`

#### open-ended

Whether or not to allow values outside the range such as "Before 1950" and "2025+".

- Type: `boolean`
- Default: `false`

#### optional

Whether to show the optional indicator after the label.

- Type: `boolean`
- Default: `false`

#### required

Ensures a child slider thumb has a value before allowing the containing form to submit

- Type: `boolean`
- Default: `false`

#### step

ets step on the range input to jump between values when dragging

- Type: `number | undefined`
- Default: `-`

#### suffix

Suffix used in text input fields and for the min and max values of the slider

- Type: `string | undefined`
- Default: `-`

#### tooltip

Supplementary information that should show in a tooltip behind an information icon after the label.

- Type: `string | undefined`
- Default: `-`

#### tooltipFormatter (JS only)

Overrides valueFormatter for the tooltip.

Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.

- Type: `((value: string, slot: SliderSlot) => string) | undefined`
- Default: `-`

#### valueFormatter (JS only)

Formatter for the tooltip and input mask values

- Type: `((value: string, slot: SliderSlot) => string) | undefined`
- Default: `-`