Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Base Slider style revisions and final review #32140

Merged
merged 2 commits into from
Apr 6, 2022
Merged

[docs] Base Slider style revisions and final review #32140

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
333bfd1
style consistency, introduce the word thumb earlier in the doc
Apr 5, 2022
f3de199
adds unstyled to headline
Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions docs/data/base/components/slider/slider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
product: base
title: React Slider unstyled component and hook
title: Unstyled React Slider component and hook
components: SliderUnstyled
githubLabel: 'component: slider'
waiAria: https://www.w3.org/TR/wai-aria-practices/#slider
packageName: '@mui/base'
---

# Slider
# Unstyled slider

<p class="description">The SliderUnstyled component lets users make selections from a range of values along a horizontal or vertical bar.</p>
<p class="description">The <code>SliderUnstyled</code> component lets users make selections from a range of values along a horizontal or vertical bar.</p>

Users may need to select a single value or a range of values on a slider.
They are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters.
Expand All @@ -27,7 +27,8 @@ import SliderUnstyled from '@mui/base/SliderUnstyled';
The most basic slider is _continuous_, which means it does not have pre-defined (_discrete_) values for the user to select from.
This is suitable for situations in which an approximate value is good enough for the user, such as brightness or volume.

But if your users need more precise options, you can create a discrete slider that snaps to pre-defined stops along the bar.
But if your users need more precise options, you can create a discrete slider that snaps the thumb to pre-defined stops along the bar.

To generate a mark for each stop, use `marks={true}`:

{{"demo": "DiscreteSlider.js"}}
Expand Down