Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - slider
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<li>The value is in a defined range.</li> </ul> <h3>Slider vs. number Input</h3> <p>Both Sliders and number Inputs are form fields that take numerical values. Because the mouse and touch interaction on a Slider is less precise, use a Slider when the exact number value isn't important, for example, when selecting image opacity or audio volume.</p> <h2>Examples</h2> <h3>Default</h3> <p>Use a Slider when a user should select an imprecise value from a midsized and defined numerical range, such as 1–100.</p> <div class="example-section"> <div class="slider-container"> <label for="default-slider" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Volume</label> <input type="range" id="default-slider" min="0" max="100" value="50" style="width: 100%; margin: 0.5rem 0;"> <div style="display: flex; justify-content: space-between; font-size: 0.875rem; color: #606B85;"> <span>0</span> <span>100</span> </div> </div> </div> <h3>Error</h3> <p>Avoid errors on Sliders by changing the defined range so no errors can occur. If a user is still able to choose an invalid option, change the Slider to its error state and use Help Text to add an inline error.</p> <div class="example-section"> <div class="slider-container"> <label for="error-slider" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #D61F1F;">Volume</label> <input type="range" id="error-slider" min="0" max="100" value="90" style="width: 100%; margin: 0.5rem 0; accent-color: #D61F1F;"> <div style="display: flex; justify-content: space-between; font-size: 0.875rem; color: #606B85;"> <span>0</span> <span>100</span> </div> <div style="color: #D61F1F; font-size: 0.875rem; margin-top: 0.5rem;">Volume is too high. Please select a value below 80.</div> </div> </div> <h3>Disabled</h3> <p>Use a disabled Slider to show users that they can't interact with the Slider.</p> <div class="example-section"> <div class="slider-container"> <label for="disabled-slider" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #8891AA;">Volume</label> <input type="range" id="disabled-slider" min="0" max="100" value="50" disabled style="width: 100%; margin: 0.5rem 0;"> <div style="display: flex; justify-content: space-between; font-size: 0.875rem; color: #8891AA;"> <span>0</span> <span>100</span> </div> </div> </div> <h3>Custom Range</h3> <p>Use a custom range Slider when the default range doesn't fit your use case.</p> <div class="example-section"> <div class="slider-container"> <label for="custom-range-slider" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Temperature (°F)</label> <input type="range" id="custom-range-slider" min="32" max="212" value="72" style="width: 100%; margin: 0.5rem 0;"> <div style="display: flex; justify-content: space-between; font-size: 0.875rem; color: #606B85;"> <span>32°F</span> <span>212°F</span> </div> </div> </div> <h3>Hide Range Labels</h3> <p>Use a Slider with hidden range labels when the range is obvious or the labels are not needed.</p> <div class="example-section"> <div class="slider-container"> <label for="hidden-labels-slider" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Opacity</label> <input type="range" id="hidden-labels-slider" min="0" max="100" value="75" style="width: 100%; margin: 0.5rem 0;"> </div> </div> <h2>When to use a Slider</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a Slider for mid-sized, defined ranges, usually 1–100.</p> <div class="slider-container"> <label for="do-slider-1" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Opacity</label> <input type="range" id="do-slider-1" min="0" max="100" value="50" style="width: 100%; margin: 0.5rem 0;"> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a Slider for very large or very small ranges.</p> <div class="slider-container"> <label for="dont-slider-1" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Number of backups</label> <input type="range" id="dont-slider-1" min="0" max="3" value="1" style="width: 100%; margin: 0.5rem 0;"> </div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a number Input when an exact number value matters.</p> <div class="slider-container"> <label for="do-input" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Auto-reload amount</label> <div style="display: flex; align-items: center;"> <span style="margin-right: 0.5rem; font-weight: 600;">¥</span> <input type="number" id="do-input" value="55" style="padding: 0.5rem; border: 1px solid #8891AA; border-radius: 4px; flex: 1;"> </div> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a Slider when an exact number value matters.</p> <div class="slider-container"> <label for="dont-slider-2" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Auto-reload amount</label> <input type="range" id="dont-slider-2" min="0" max="10000" value="420" style="width: 100%; margin: 0.5rem 0;"> <div style="text-align: center; font-size: 0.875rem; color: #606B85;">¥420</div> </div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a Meter when you need to visually show the size of a numerical value, but don't want the bar to be interactive.</p> <div class="slider-container"> <label for="do-meter" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Current balance</label> <div style="width: 100%; height: 8px; background: #E1E3EA; border-radius: 4px; overflow: hidden;"> <div style="width: 87%; height: 100%; background: #0263E0;"></div> </div> <div style="text-align: right; font-size: 0.875rem; color: #606B85; margin-top: 0.25rem;">¥8,673 / ¥10,000</div> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a disabled Slider when the value of the Slider is important to show. Disabled form fields aren't high-contrast enough to be visible.</p> <div class="slider-container"> <label for="dont-slider-3" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #8891AA;">Current balance</label> <input type="range" id="dont-slider-3" min="0" max="10000" value="8673" disabled style="width: 100%; margin: 0.5rem 0;"> <div style="text-align: center; font-size: 0.875rem; color: #8891AA;">¥8,673</div> </div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a Radio Group or Radio Button Group to allow users to select a list of consecutive options with precision, whether they're numerical or not.</p> <div class="slider-container"> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 0.5rem;">Maximum messages per month</legend> <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;"> <label style="padding: 0.5rem 1rem; border: 1px solid #8891AA; border-radius: 4px; cursor: pointer; background: white;"> <input type="radio" name="messages" value="10" style="margin-right: 0.5rem;"> 10 </label> <label style="padding: 0.5rem 1rem; border: 1px solid #0263E0; border-radius: 4px; cursor: pointer; background: #F0F6FF;"> <input type="radio" name="messages" value="50" checked style="margin-right: 0.5rem;"> 50 </label> <label style="padding: 0.5rem 1rem; border: 1px solid #8891AA; border-radius: 4px; cursor: pointer; background: white;"> <input type="radio" name="messages" value="100" style="margin-right: 0.5rem;"> 100 </label> </div> </fieldset> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 0.5rem;">Protection level</legend> <div style="display: flex; flex-direction: column; gap: 0.5rem;"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="radio" name="protection" value="basic" style="margin-right: 0.5rem;"> Basic protection </label> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="radio" name="protection" value="standard" style="margin-right: 0.5rem;"> Standard protection </label> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="radio" name="protection" value="max" checked style="margin-right: 0.5rem;"> Max protection </label> </div> </fieldset> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a Slider to allow selection of non-numerical values or when there isn't a definable range.</p> <div class="slider-container"> <label for="dont-slider-4" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Auto-reload amount (50,000+)</label> <input type="range" id="dont-slider-4" min="0" max="50000" value="50000" style="width: 100%; margin: 0.5rem 0;"> <div style="text-align: center; font-size: 0.875rem; color: #606B85;">50,000+</div> </div> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Add interactivity to sliders document.querySelectorAll('input[type="range"]').forEach(slider => { slider.addEventListener('input', function() { // Update any associated value displays const container = this.closest('.slider-container'); const valueDisplay = container.querySelector('.value-display'); if (valueDisplay) { valueDisplay.textContent = this.value; } }); }); // Add interactivity to radio buttons document.querySelectorAll('input[type="radio"]').forEach(radio => { radio.addEventListener('change', function() { // Update styling for radio button groups const container = this.closest('fieldset') || this.closest('.slider-container'); if (container) { container.querySelectorAll('label').forEach(label => { if (label.querySelector('input[type="radio"]').checked) { label.style.borderColor = '#0263E0'; label.style.background = '#F0F6FF'; } else { label.style.borderColor = '#8891AA'; label.style.background = 'white'; } }); } }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">