Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
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.

Slider API

Selector: ngs-slider

Exported as: ngsSlider

Inputs

NameTypeDescription
disabledbooleanWhether the slider is disabled.
discretebooleanWhether the slider is discrete (shows values on thumbs).
showTickMarksbooleanWhether to show tick marks on the track.
minnumberThe minimum value of the slider. Default is 0.
maxnumberThe maximum value of the slider. Default is 100.
stepnumberThe step increment of the slider. Default is 1.
displayWith(value: number) => stringFunction used to format the thumb label.

SliderThumb API

Selector: input[ngsSliderThumb]

Exported as: ngsSliderThumb

Inputs

NameTypeDescription
valuenumberThe value of the thumb.

Outputs

NameTypeDescription
valueChangeEventEmitter<number>Emits when the thumb value changes.