Range

A slider for selecting a value within a specified range.

Introduction

Getting Started Colors Responsive Utilities

Components

Accordion Badge Blankslate Box Breadcrumb Button Checkbox Checklist Chip Close Container Content Control Conversation Divider Dropdown Fieldset File Flag Gauge Grid Header Icon Iconset Image Imageset Input List Loading Mask Menu Meta Modal Notice Pagination Popover Procedure Progress Quote Radio Range Rating Select Selection Snackbar Statistic Switch Tab Table Text Timeline Tooltip Wrap

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