A slider allows quickly selecting a value from a range. Common uses include seeking through audio or video, changing a volume level, or setting values in image editors.
<div class="flexy-slider">
<input type="range" class="flexy-slider__input" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob"></div>
</div>
</div>
</div>
<div class="flexy-slider">
<input type="range" class="flexy-slider__input" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob">
<div class="flexy-slider__thumb-ripple"></div>
</div>
</div>
</div>
</div>
<div class="flexy-slider">
<input type="range" class="flexy-slider__input" step="10" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__ticks">
<div class="flexy-slider__inactive-ticks"></div>
<div class="flexy-slider__active-ticks"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob"></div>
</div>
</div>
</div>
<div class="flexy-slider">
<input type="range" class="flexy-slider__input" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob">
<div class="flexy-slider__value-indicator"></div>
</div>
</div>
</div>
</div>
<div class="flexy-slider">
<input type="range" class="flexy-slider__input" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob">
<div class="flexy-slider__value-indicator-m3"></div>
</div>
</div>
</div>
</div>
Normally, the slider doesn’t support the latest Material 3 design, but you can use its design tokens and a few tricks to style it as close as possible to the Material 3 slider.
See Material 3 Slider for Latest Material 3 Design slider.
<style>
#slider-m3-latest {
--flexy-comp-slider-track-height: 16px;
--flexy-comp-slider-thumb-width: 16px;
--flexy-comp-slider-thumb-height: 48px;
--flexy-comp-slider-thumb-outline-width: 6px;
--flexy-comp-slider-thumb-outline-color: var(--flexy-sys-color-surface);
--flexy-comp-slider-ticks-size: 4px;
--flexy-comp-slider-value-indicator-arrow-size: 0px;
--flexy-comp-slider-value-indicator-text-size: 14px;
--flexy-comp-slider-value-indicator-shape: 20px;
--flexy-comp-slider-value-indicator-height: 40px;
--flexy-comp-slider-value-indicator-width: 48px;
--flexy-comp-slider-value-indicator-fill-color: var(--flexy-sys-palette-grey-80);
--flexy-comp-slider-value-indicator-text-color: var(--flexy-sys-color-surface);
--flexy-comp-slider-animation-sliding-duration: 80ms;
}
</style>
<div class="flexy-slider" data-ticks-interval="10" id="slider-m3-latest">
<input type="range" class="flexy-slider__input" step="1" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__ticks">
<div class="flexy-slider__inactive-ticks"></div>
<div class="flexy-slider__active-ticks"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob">
<div class="flexy-slider__value-indicator"></div>
</div>
</div>
</div>
</div>
In this example, the slider is styled as a YouTube video player progress bar
using the track-active-gradient token, which applies a linear gradient to the
active track. You can also apply a gradient to the inactive track using the
track-inactive-gradient token.
To see the result more clearly, use the dark mode by clicking the theme toggle button on the top navigation bar.
<style>
#gradient-slider {
--flexy-comp-slider-thumb-color: #f03;
--flexy-comp-slider-track-inactive-color: #80808040;
--flexy-comp-slider-track-active-gradient: linear-gradient(
to right,
#f03 0%,
#f38 100%
);
}
</style>
<div class="flexy-slider" id="gradient-slider">
<input type="range" class="flexy-slider__input" />
<div class="flexy-slider__track">
<div class="flexy-slider__inactive-track"></div>
<div class="flexy-slider__active-track"></div>
</div>
<div class="flexy-slider__thumb-rail">
<div class="flexy-slider__thumb">
<div class="flexy-slider__thumb-knob"></div>
</div>
</div>
</div>
flexy-sliderflexy-slider--noanimationthumb-outline-widththumb-outline-colorthumb-colorthumb-heightthumb-shapethumb-widththumb-icon-colorthumb-shadowripple-sizeripple-colortrack-active-colortrack-active-gradienttrack-heighttrack-inactive-colortrack-inactive-gradienttrack-inactive-opacitytrack-shapeticks-inactive-colorticks-active-colorticks-sizevalue-indicator-arrow-sizevalue-indicator-bottom-spacingvalue-indicator-heightvalue-indicator-widthvalue-indicator-shapevalue-indicator-fill-colorvalue-indicator-text-colorvalue-indicator-text-sizevalue-indicator-m3-sizeanimation-jumping-durationanimation-jumping-easinganimation-sliding-durationanimation-sliding-easingfocus-ring-colorLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)