Slider Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Assumptions and Limitations
6. References

Objectives

The Slider component allows selection in a given range by moving the thumb along the track. The track can be defined as continuous or stepped and you can choose between SINGLE and RANGE slider types.

2. User Stories

Developer:

As a developer I would like to:

• be able to provide an array of strings that the slider could spread and visualize it as labels of the thumbs.

<igx-slider [stepLabels]="['spring', 'autumn', 'winter', 'summer']">
</igx-slider>

• be able to change the type of the slider as a single or range.

<igx-slider [stepLabels]="['spring', 'autumn', 'winter', 'summer']" [type]="sliderType">
</igx-slider>

• be able to track the changes of the values per every slide.
• have the ability to manipulate the slider values through two way data binding.
• have a continuous and discontinued(stepped) representation of the slider.

End user:

As end user I would like to:

• be able to pass an array of values represented by the thumbs of the slider.
• be able to navigate through the slider by dragging the pins.
• be able to change the positioning of the pins through the API.

Acceptance criteria

1. Have a slider that represents a sequence of numbers [1...n]
2. Have a slider that allows smooth navigation with mouse drag.
3. Have the ability to put boundaries for sliding and rendering.
4. Have a slider that shows the values we are navigating through.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End User Experience

3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. User Interface

Include a diagram linking the elements with the visual representation of the feature

3.5. Navigation

3.6. API

Enums

SliderType

Name	Description
SLIDER	Slider with single thumb.
RANGE	Range slider with multiple thumbs, that can mark the range.

Interfaces

IRangeSliderValue

Name	Type	Description
lower	number	The lower value of the range slider
upper	number	The upper value of the range slider

Inputs

Name	Description	Type	Default value
id	Unique identifier of the component. If not provided it will be automatically generated.	string	igx-slider-0
disabled	Disables or enables UI interaction.	boolean	false
isContinuous	Marks slider as continuous. By default is considered that the slider is discrete. Discrete slider does not have ticks and does not shows bubble labels for values.	boolean	false
lowerBound	The lower boundary of the slider value. If not set is the same as min value.	number	0
upperBound	The lower boundary of the slider value. If not set is the same as max value.	number	100
minValue	The minimum value for the slider.	number	0
maxValue	The maximal value for the slider.	number	100
step	The incremental/decremental step of the value when dragging the thumb. The step should be greater than 0.	number	1
thumbLabelVisibilityDuration	The duration visibility of thumbs labels.	number	750 milliseconds
type	Sets the SliderType, which is SLIDER or RANGE.	SliderType	SLIDER

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions	Limitation Notes

6. References

Specify all referenced external sources