Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

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.

0

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

Result