Slider

Slider lets users choose a numeric value, or a start and end range, by dragging thumb controls along a track. Use it when approximate visual adjustment is better than typing.

Good examples include volume, opacity, zoom, size, threshold, percentage, rating or score, price range, numeric date or age range, chart settings, visual tuning, and filter ranges. Use input ngsSliderThumb for one value, or input ngsSliderStartThumb and input ngsSliderEndThumb for a range.

Do not use Slider to show progress or status, enter exact numbers as the primary workflow, choose named categories, compare before and after images, paginate, or build table sorting logic. Use ProgressBar, Gauge, NumberInput, Select, Radio, Segmented, ComparisonSlider, Paginator, or Sort when those match the job better. If the value must be exact, pair Slider with NumberInput or use NumberInput instead.

The NgStarter Angular Slider component lets you let users choose one numeric value or a start/end range by dragging thumb controls. Use ngs-slider when approximate visual numeric adjustment is better than typing. It includes examples for Basic Slider, Custom Thumb Label Formatting, Range Slider, and Configurable Slider.

Basic Slider

Use a single-thumb Slider when the user adjusts one numeric value visually.

Custom Thumb Label Formatting

Use displayWith when the thumb label needs units, compact numbers, or custom formatting.

Range Slider

Use start and end thumbs when the user chooses a numeric interval such as a price, age, or threshold range.

Configurable Slider

Configure min, max, step, disabled state, discrete labels, and tick marks to match the allowed numeric range.

Slider configuration

Value

Min value

Max value

Step size

Show ticks

Show thumb label

Disabled

Result

Value: 0

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.