ptcs-slider

Overview

A slider is useful when selecting a numeric value within a certain range. The slider design makes it impossible to enter a bad value. Any value that can be picked on the slider is valid.

The ptcs-slider has several features * Supports horizontal and vertical layouts * The range can be between any numbers, not only integers or positive numbers * The step can be any arbitrary (positive) number * The slider can have one thumb for selecting a single value or two thumbs for selecting ranges * The slider can be customized with icons

Usage Examples

Basic Usage

<ptcs-slider min-value="0" min-label="Freezing" max-value="100" max-label="Boiling">
</ptcs-slider>

Vertical slider

<ptcs-slider vertical></ptcs-slider>

Component API

Properties

Property	Type	Description	Triggers a changed event?
disabled	Boolean	Is the slider disabled? Default: false	-
editValue	Boolean	Can the displayed value(s) be edited? Default: false	-
fullTrack	Boolean	Should the track span the full slider or leave space for the slider thumbs to go partially outside? If false, indicates that the thumb always reads from the center of the thumb. If true indicates that the value position is sliding inside the thumb: when the thumb is at the leftmost position, the value position is at the left side of the thumb, when the thumb is at 50% the value position is at the center of the thumb, and when the thumb is at the rightmost position the value position is at the right side of the thumb. Default: false	-
iconSet	String	An iconset for the slider icons	-
label	String	The slider label	-
labelAlignment	String	The alignment of the slider label. Supported values are: left, center, and right. Default: left	-
labelVariant	String	The variant of the label. Intended for theming.	-
maxIcon	String	The icon on the max side of the slider	-
maxIconSize	String	The icon size of maxIcon	-
maxLabel	String	The label for the max side of the slider	-
maxValue	Number	The maximum value for the slider. Default: 100
minIcon	String	The icon for the min side of the slider	-
minIconSize	String	The icon size of minIcon	-
minLabel	String	The label for the min side of the slider	-
minValue	Number	The minimum value of the slider. Default: 0	-
minValueWidth	Number	The minimum width for the value container. Default: 34	-
maxValueWidth	Number	The maximum width for the value container (single line truncation overflow pattern). Default: 96	-
numStep	Number	The number of discrete steps the that the slider range will be partitioned into. Only one of numStep and sizeStep should be specified. If neither are specified, the slider is continuous.	-
overlapThumbs	Boolean	When the slider has two thumbs (for selecting ranges), can they overlap? Default: false
precision	Number	Number of fraction digits for value and value2. If 0 then the slider selects integers. Defalt: 0	-
range	Boolean	Is the slider selecting a range instead of a single value? That is, use two thumbs instead of one? Default: false	-
reverseLabels	Boolean	Swap the location of the labels and values? Default: false	-
reverseMinmax	Boolean	Swap the location of the min and max sides? Default: false	-
showValue	String	Show the current value(s)? The options are: yes, no, true, false, or drag. The latter means that the value is only displayed when dragging the thumb. Default: false	-
sizeStep	Number	The size of a slider step. Only one of sizeStep and numStep should be specified. If neither are specified, the slider is continuous.	-
tabindex	Number	An HTML tabindex. When assigned the controls can be focused and supports keyboard navigation	-
thumb2Icon	String	Icon for the range thumb (the second thumb)	-
thumbIcon	String	Icon for the thumb	-
thumbSize	Number	Size of thumb. Thumbs are squared. Default: 44	-
thumbTooltip	String	Tooltip text for thumb	-
thumbTooltipIcon	String	Icon for the thumb tooltip	-
thumb2Tooltip	String	Tooltip text for second thumb (on range slider)	-
thumb2TooltipIcon	String	Icon for the second thumb tooltip (on range slider)	-
trackPlacement	String	Placement of the track relative to the thumb. Options: center, start, end. Horizontal sliders may use top instead of start and bottom instead of end. Vertical sliders may use left and right. Default: center	-
trackSize	Number	width (if vertical) or height (if horizontal) of the slider track. Default: 20	-
value	Number	Current value of slider. Default: 0	yes
value2	Number	Current value of second thumb, if slider is a range slider. Default: 100	yes
variant	String	The variant of the slider. Intended for theming.	-
vertical	Boolean	Is slider orientation vertical instead of horizontal? Default: false	-
hideMinMaxLabels	Boolean	Hide min/max labels?	-
### Methods

The slider does not have any methods

Styling

Parts

Part	Description
icon-min	The icon on the min side
icon-max	The icon on the max side
label	The slider label
min-label	The label on the min side
max-label	The label on the max side
slider-container	The container of the track and thumbs
track	The slider track
track-before	The part of the track that is before the thumb
track-between	The part of the track that is between the thumbs. Only visible in range mode.
track-after	The part of the track that is after the thumb
thumb	The thumbs
thumb1	The first thumb
thumb2	The second (range) thumb
value	The slider value
value2	The slider second value (if a range slider)

State attributes

Attribute	Description	Part
vertical	Is the slider vertical (instead of horizontal)?	:host
disabled	Is the slider disabled?	:host
range	Is the slider a range slider?	:host
reverse-minmax	Has the min and max swapped sides?	:host
reverse-labels	Have the labels and values swapped sides?	:host
range-collapsed	Is value === value2?	:host
dragging-thumb	Is the thumb dragged?	:host
editing	Is the slider value edited?	value, value2

ARIA

Attribute	Value
role	If tabindex is assigned, the slider sets the role attribute to slider.
aria-valuenow	Contains the current value. If slider is a range slider, contains: ${value} to ${value2}
aria-valuemin	The minimum value
aria-valuemax	The maximum value
aria-orientation	vertical if slider is vertical, otherwise not assigned
aria-describedby	Added to thumb when tooltip is showing; value: ptcs-tooltip-overlay
aria-disabled	Only present if the slider is disabled
aria-label	The value assigned to the label property

Keyboard Navigation

Key	Action
ArrowLeft, ArrowDown	Decrease slider value with one unit
ArrowRight, ArrowUp	Increase slider value with one unit
End	Set slider value to the maximum value
ESC	Hide tooltip (if showing)
Home	Set slider value to the minimum value
PageDown	Decrease slider value with several units
PageUp	Increase slider value with several units
Shift-TAB	Leave slider or move focus to first thumb
TAB	Leave slider or move focus to second thumb