Component

Slider

Also known as: Range input

A form control for choosing a value within a preset range of values.

35 Examples

Filter:

  • Slider

    Ant Design

    Tech

    • React

    Features

    • Code examples
    • Accessibility issues
    • Open source

  • Range

    Atlassian Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Accessibility

  • Slider

    Backpack

    Tech

    • Mobile
    • React

    Features

    • Code examples
    • Usage guidelines
    • Open source
    • Tone of voice

  • Slider

    Base Web

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Slider

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Slider

    Carbon Design System

    Tech

    • React
    • Vanilla JS
    • Angular
    • Vue
    • Svelte
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Slider

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Range Input

    Clarity Design System

    Tech

    • CSS
    • Angular
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Range Slider

    Duet Design System

    Tech

    • Angular
    • Vue
    • React

    Features

    • Code examples

  • Range sliders

    Elastic UI framework

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Open source

  • Range

    Flowbite

    Tech

    • Tailwind CSS

    Features

    • Open source
    • Code examples

  • Slider

    Fluent UI

    Tech

    • React
    • Web Components
    • Mobile

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • RangeInput

    Grommet

    Tech

    • React

    Features

    • Code examples
    • Open source

  • RangeInput

    Instructure-UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Accessibility
    • Open source

  • Slider

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Slider

    Material Design

    Tech

    • Mobile
    • Web Components
    • Sass

    Features

    • Usage guidelines
    • Open source
    • Accessibility

  • Range slider

    Morningstar Design System

    Tech

    • Vue

    Features

    • Usage guidelines

  • Range slider

    Nessie

    Tech

    • Web Components
    • Tailwind CSS

    Features

    • Usage guidelines
    • Code examples

  • Slider

    NewsKit

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Range

    Nord Design System

    Tech

    • Web Components

    Features

    • Code examples
    • Usage guidelines

  • Slider

    Orbit

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Tone of voice

  • Slider

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Range slider

    Polaris

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

  • Slider

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Range

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Slider

    Radix Primitives

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Slider (Range)

    Reach UI

    Tech

    • React

    Features

    • Accessibility
    • Code examples
    • Open source

  • Slider

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Slider

    SEB Design Library

    Tech

    • Sass
    • React
    • Angular

    Features

    • Code examples
    • Usage guidelines

  • Slider

    shadcn/ui

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Range

    Shoelace

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Slider

    Spectrum

    Tech

    • CSS
    • Web Components
    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Range Input

    United States Web Design System

    Tech

    • Nunjucks

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Slider

    Visa Product Design System

    Tech

    • Angular
    • React
    • CSS
    • Mobile

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Slider

    Wanda

    Tech

    • React
    • CSS Modules

    Features

    • Code examples
    • Open source

Resources

  • Designing The Perfect Slider

    By Vitaly Friedman

    Smashing Magazine

  • Slider Guidelines

    By Tess Gadd

    Balsamiq

  • Slider

    Open UI

Name distribution