Range

A slider for selecting a value within a specified range.

Introduction

Getting Started Colors Responsive Utilities

Layout

Container Control Grid Wrap

Form

Button Checkbox Fieldset File Input Radio Range Select Selection Switch

Paragraphy

Box Content Divider Header Quote Text

Feedback

Blankslate Gauge Loading Mask Notice Procedure Progress Snackbar

Interaction

Accordion Dropdown Modal Popover Tooltip

Media

Flag Icon Iconset Image Imageset

Data

Badge Checklist Chip Close Conversation List Meta Rating Statistic Table Timeline

Navigation

Breadcrumb Menu Pagination Tab

Application

App Center App Drawer App Layout App Navbar App Sidebar App Topbar

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-range">
    <input type="range">
</div>

Types

Step

The [step] attribute allows the value to change in specified intervals.

<div class="ts-range">
    <input type="range" min="0" max="5" step="1">
</div>

States

Disabled

A range slider can show it's currently disabled.

<div class="ts-range">
    <input type="range" disabled>
</div>

Types

Step step

States

Disabled disabled

GitHub Getting Started Components Examples

Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.

Translators: Yami Odymel