The Slider (plus-slider) component lets users choose a single numeric value or a range between two values. It supports labels, descriptions, step markers, value tooltips, vertical orientation, form submission, and keyboard interaction.

Usage

Basic Example

Use value, min, max, and step to define the selectable scale.

Show code

React

import { PlusSlider } from '@plusui/react';
import { useState } from 'react';

export default () => {
  const [value, setValue] = useState(40);

  return (
    <PlusSlider
      label="Volume"
      description="Choose a comfortable level"
      value={value}
      min={0}
      max={100}
      step={5}
      onPlusChange={(event) => setValue(event.detail.value)}
    />
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-slider-basic',
  template: `
    <plus-slider
      label="Volume"
      description="Choose a comfortable level"
      [value]="value"
      min="0"
      max="100"
      step="5"
      (plus-change)="handleChange($event)"
    ></plus-slider>
  `
})
export class SliderBasicComponent {
  value = 40;

  handleChange(event: any) {
    this.value = event.detail.value;
  }
}

Vue

<template>
  <plus-slider
    label="Volume"
    description="Choose a comfortable level"
    :value="value"
    min="0"
    max="100"
    step="5"
    @plus-change="handleChange"
  ></plus-slider>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(40);

const handleChange = (event) => {
  value.value = event.detail.value;
};
</script>

Svelte

<script>
  let value = 40;

  function handleChange(event) {
    value = event.detail.value;
  }
</script>

<plus-slider
  label="Volume"
  description="Choose a comfortable level"
  value={value}
  min="0"
  max="100"
  step="5"
  on:plus-change={handleChange}
></plus-slider>

HTML

<plus-slider
  id="basic-slider"
  label="Volume"
  description="Choose a comfortable level"
  value="40"
  min="0"
  max="100"
  step="5"
></plus-slider>

<script>
  document.getElementById('basic-slider').addEventListener('plus-change', (event) => {
    console.log('Slider changed:', event.detail.value);
  });
</script>

Show console

Console Output:

No console output yet. Try interacting with the components above.

Clear Console

Range

Add range to render two thumbs. Use min-value and max-value for the selected bounds.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider range="true" label="Budget" min="0" max="1000" step="50" minValue="250" maxValue="750">
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider range="true" label="Budget" min="0" max="1000" step="50" min-value="250" max-value="750">
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider range="true" label="Budget" min="0" max="1000" step="50" min-value="250" max-value="750">
  </plus-slider>
</template>

Svelte

<plus-slider range="true" label="Budget" min="0" max="1000" step="50" min-value="250" max-value="750">
</plus-slider>

HTML

<plus-slider range="true" label="Budget" min="0" max="1000" step="50" min-value="250" max-value="750">
</plus-slider>

Sizes

Use size to adjust the thumb and track scale.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Extra small" size="xs" value="35">
      </PlusSlider>
      <PlusSlider label="Small" size="sm" value="40">
      </PlusSlider>
      <PlusSlider label="Medium" size="md" value="45">
      </PlusSlider>
      <PlusSlider label="Large" size="lg" value="50">
      </PlusSlider>
      <PlusSlider label="Extra large" size="xl" value="55">
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Extra small" size="xs" value="35">
    </plus-slider>
    <plus-slider label="Small" size="sm" value="40">
    </plus-slider>
    <plus-slider label="Medium" size="md" value="45">
    </plus-slider>
    <plus-slider label="Large" size="lg" value="50">
    </plus-slider>
    <plus-slider label="Extra large" size="xl" value="55">
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Extra small" size="xs" value="35">
  </plus-slider>
  <plus-slider label="Small" size="sm" value="40">
  </plus-slider>
  <plus-slider label="Medium" size="md" value="45">
  </plus-slider>
  <plus-slider label="Large" size="lg" value="50">
  </plus-slider>
  <plus-slider label="Extra large" size="xl" value="55">
  </plus-slider>
</template>

Svelte

<plus-slider label="Extra small" size="xs" value="35">
</plus-slider>
<plus-slider label="Small" size="sm" value="40">
</plus-slider>
<plus-slider label="Medium" size="md" value="45">
</plus-slider>
<plus-slider label="Large" size="lg" value="50">
</plus-slider>
<plus-slider label="Extra large" size="xl" value="55">
</plus-slider>

HTML

<plus-slider label="Extra small" size="xs" value="35">
</plus-slider>
<plus-slider label="Small" size="sm" value="40">
</plus-slider>
<plus-slider label="Medium" size="md" value="45">
</plus-slider>
<plus-slider label="Large" size="lg" value="50">
</plus-slider>
<plus-slider label="Extra large" size="xl" value="55">
</plus-slider>

Markers

Set with-markers to render a marker at each step. Keep the number of steps reasonable for readability.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Satisfaction" value="6" min="0" max="10" step="1" withMarkers="true">
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Satisfaction" value="6" min="0" max="10" step="1" with-markers="true">
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Satisfaction" value="6" min="0" max="10" step="1" with-markers="true">
  </plus-slider>
</template>

Svelte

<plus-slider label="Satisfaction" value="6" min="0" max="10" step="1" with-markers="true">
</plus-slider>

HTML

<plus-slider label="Satisfaction" value="6" min="0" max="10" step="1" with-markers="true">
</plus-slider>

Tooltip

Set with-tooltip to show the current value while the slider is focused or dragged.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Opacity" value="70" min="0" max="100" step="10" withTooltip="true">
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Opacity" value="70" min="0" max="100" step="10" with-tooltip="true">
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Opacity" value="70" min="0" max="100" step="10" with-tooltip="true">
  </plus-slider>
</template>

Svelte

<plus-slider label="Opacity" value="70" min="0" max="100" step="10" with-tooltip="true">
</plus-slider>

HTML

<plus-slider label="Opacity" value="70" min="0" max="100" step="10" with-tooltip="true">
</plus-slider>

Indicator Offset

Use indicator-offset to start the active track from a custom baseline.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Temperature" value="24" min="-20" max="40" step="1" indicatorOffset="0" withTooltip="true">
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Temperature" value="24" min="-20" max="40" step="1" indicator-offset="0" with-tooltip="true">
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Temperature" value="24" min="-20" max="40" step="1" indicator-offset="0" with-tooltip="true">
  </plus-slider>
</template>

Svelte

<plus-slider label="Temperature" value="24" min="-20" max="40" step="1" indicator-offset="0" with-tooltip="true">
</plus-slider>

HTML

<plus-slider label="Temperature" value="24" min="-20" max="40" step="1" indicator-offset="0" with-tooltip="true">
</plus-slider>

Vertical

Set orientation="vertical" for vertical controls.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Brightness" value="60" orientation="vertical" min="0" max="100" step="10" withMarkers="true">
      </PlusSlider>
      <PlusSlider range="true" label="Range" orientation="vertical" min="0" max="100" minValue="25" maxValue="75">
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Brightness" value="60" orientation="vertical" min="0" max="100" step="10" with-markers="true">
    </plus-slider>
    <plus-slider range="true" label="Range" orientation="vertical" min="0" max="100" min-value="25" max-value="75">
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Brightness" value="60" orientation="vertical" min="0" max="100" step="10" with-markers="true">
  </plus-slider>
  <plus-slider range="true" label="Range" orientation="vertical" min="0" max="100" min-value="25" max-value="75">
  </plus-slider>
</template>

Svelte

<plus-slider label="Brightness" value="60" orientation="vertical" min="0" max="100" step="10" with-markers="true">
</plus-slider>
<plus-slider range="true" label="Range" orientation="vertical" min="0" max="100" min-value="25" max-value="75">
</plus-slider>

HTML

<plus-slider label="Brightness" value="60" orientation="vertical" min="0" max="100" step="10" with-markers="true">
</plus-slider>
<plus-slider range="true" label="Range" orientation="vertical" min="0" max="100" min-value="25" max-value="75">
</plus-slider>

Reference Labels

Use the reference slot for scale labels.

LowMediumHigh

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Priority" value="50" min="0" max="100" step="25" withMarkers="true">
        <div slot="reference" style="display: flex; justify-content: space-between; width: 100%; font-size: 12px;">
          <span>
            Low
          </span>
          <span>
            Medium
          </span>
          <span>
            High
          </span>
        </div>
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Priority" value="50" min="0" max="100" step="25" with-markers="true">
      <div slot="reference" style="display: flex; justify-content: space-between; width: 100%; font-size: 12px;">
        <span>
          Low
        </span>
        <span>
          Medium
        </span>
        <span>
          High
        </span>
      </div>
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Priority" value="50" min="0" max="100" step="25" with-markers="true">
    <div slot="reference" style="display: flex; justify-content: space-between; width: 100%; font-size: 12px;">
      <span>
        Low
      </span>
      <span>
        Medium
      </span>
      <span>
        High
      </span>
    </div>
  </plus-slider>
</template>

Svelte

<plus-slider label="Priority" value="50" min="0" max="100" step="25" with-markers="true">
  <div slot="reference" style="display: flex; justify-content: space-between; width: 100%; font-size: 12px;">
    <span>
      Low
    </span>
    <span>
      Medium
    </span>
    <span>
      High
    </span>
  </div>
</plus-slider>

HTML

<plus-slider label="Priority" value="50" min="0" max="100" step="25" with-markers="true">
  <div slot="reference" style="display: flex; justify-content: space-between; width: 100%; font-size: 12px;">
    <span>
      Low
    </span>
    <span>
      Medium
    </span>
    <span>
      High
    </span>
  </div>
</plus-slider>

Disabled & Readonly

Use disabled to remove interaction and focus. Use readonly to keep the slider focusable while preventing edits.

Show code

React

import { PlusSlider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusSlider label="Disabled" value="35" disabled>
      </PlusSlider>
      <PlusSlider label="Readonly" value="65" readonly>
      </PlusSlider>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-slider label="Disabled" value="35" disabled>
    </plus-slider>
    <plus-slider label="Readonly" value="65" readonly>
    </plus-slider>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-slider label="Disabled" value="35" disabled>
  </plus-slider>
  <plus-slider label="Readonly" value="65" readonly>
  </plus-slider>
</template>

Svelte

<plus-slider label="Disabled" value="35" disabled>
</plus-slider>
<plus-slider label="Readonly" value="65" readonly>
</plus-slider>

HTML

<plus-slider label="Disabled" value="35" disabled>
</plus-slider>
<plus-slider label="Readonly" value="65" readonly>
</plus-slider>

Forms

plus-slider is form-associated. Single sliders submit one value. Range sliders submit both selected values under the same name.

Note

Range values are appended to FormData as two entries with the same field name.

Submit

Show code

React

Angular

Vue

Svelte

HTML

<form id="slider-form">
  <plus-slider name="volume" label="Volume" value="40"></plus-slider>
  <plus-slider name="price" label="Price range" range min-value="20" max-value="80"></plus-slider>
  <plus-button type="submit">Submit</plus-button>
</form>

<script>
  document.getElementById('slider-form').addEventListener('submit', (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);

    console.log('volume:', data.get('volume'));
    console.log('price:', data.getAll('price'));
  });
</script>

Show console

Console Output:

No console output yet. Try interacting with the components above.

Clear Console

Accessibility (a11y)

• Keyboard Behavior:
  • ArrowRight / ArrowUp: Increases the active thumb by step.
  • ArrowLeft / ArrowDown: Decreases the active thumb by step.
  • Home: Moves to the minimum value.
  • End: Moves to the maximum value.
  • PageUp / PageDown: Moves by a larger step.
  • Enter: Submits the associated form when available.
• Screen Reader:
  • Each thumb uses role="slider".
  • aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext expose the current value.
  • aria-orientation, aria-disabled, and aria-readonly reflect the component state.
  • Range sliders expose separate minimum and maximum thumbs.
• Required Developer Actions:
  • Provide a meaningful label or label slot.
  • Use clear reference labels when markers need context.
  • Avoid very small step values with with-markers, because dense markers reduce readability.

Design System

Plus UI Design System on Figma

Visit

API Reference

Properties

Name	Type	Default	Description	Required
label	string	undefined	Text label. Use the label slot for rich content.	No
description	string	undefined	Helper text. Use the description slot for rich content.	No
kind	'min-range' | 'range'	'min-range'	Legacy range mode alias. Prefer range.	No
range	boolean	false	Enables two-thumb range selection.	No
name	string	''	Form field name.	No
value	number	0	Current value for a single-value slider.	No
min-value	number	0	Current lower value for range sliders.	No
max-value	number	50	Current upper value for range sliders.	No
min	number	0	Minimum selectable value.	No
max	number	100	Maximum selectable value.	No
step	number	1	Increment used by pointer and keyboard interaction.	No
indicator-offset	number	undefined	Baseline for the active indicator on single-value sliders.	No
orientation	'horizontal' | 'vertical'	'horizontal'	Slider orientation.	No
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Slider visual size.	No
disabled	boolean	false	Disables interaction and focus.	No
readonly	boolean	false	Prevents edits while keeping the slider focusable.	No
autofocus	boolean	false	Focuses the slider when it is first rendered.	No
with-markers	boolean	false	Draws markers at each step.	No
with-tooltip	boolean	false	Shows value tooltip while focused or dragged.	No
tooltip-placement	'top' | 'right' | 'bottom' | 'left'	'top'	Tooltip placement.	No
tooltip-distance	number	8	Reserved tooltip distance value for API compatibility.	No
full-width	boolean	false	Makes the slider fill its parent width.	No
valueFormatter	(value: number) => string	undefined	JavaScript property used to format tooltip and aria-valuetext.	No

Events

Name	Payload Type	Description
plus-input	CustomEvent<{ value: number }> or CustomEvent<{ minValue: number; maxValue: number }>	Fired while the user changes a value.
plus-change	CustomEvent<{ value: number }> or CustomEvent<{ minValue: number; maxValue: number }>	Fired when the user commits a value change.
plus-focus	CustomEvent<void>	Fired when a thumb receives focus.
plus-blur	CustomEvent<void>	Fired when focus leaves the slider.
input	Event	Native input event for form compatibility.
change	Event	Native change event for form compatibility.

Methods

Name	Description
stepUp()	Increases the single value or range max by step.
stepDown()	Decreases the single value or range min by step.
focus()	Focuses the active slider thumb.
blur()	Removes focus from slider thumbs.

Slots

Name	Description
label	Custom label content.
description	Custom description content.
reference	Reference labels rendered below or beside the slider.

CSS Shadow Parts

Name	Description
base	The component wrapper.
label	The slider label.
description	The slider description.
slider	The slider interaction wrapper.
track	The inactive track.
indicator	The selected range indicator.
markers	Marker container.
marker	Individual marker.
references	Reference slot container.
thumb	Slider thumb.
thumb-min	Minimum thumb for range sliders.
thumb-max	Maximum thumb for range sliders.
tooltip	Value tooltip.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective