MaterialFX/wiki/Slider.md

Slider

Preview

MFXSliders

• Style Class: mfx-slider

• Default Stylesheet: MFXSlider.css

• Default Skin: MFXSliderSkin.java

Properties

Property	Description	Type
min	Specifies the minimum value the slider can reach	Double
max	Specifies the maximum value the slider can reach	Double
value	Specifies the slider's actual value	Double
thumbSupplier	Specifies the Supplier used to build the slider's thumb. Attempting to set or return a null value will fallback to the default supplier	Supplier
popupSupplier	Specifies the Supplier used to build the slider's popup. You can also set or return null to remove the popup	Supplier
popupPadding	Specifies the extra gap between the thumb and the popup	Double
decimalPrecision	Specifies the number of decimal places for the slider's value	Integer
enableKeyboard	Specifies if the value can be adjusted with the keyboard or not	Boolean
ranges1	Returns the first list of ranges	ObservableList
ranges2	Returns the second list of ranges	ObservableList
ranges3	Returns the third list of ranges	ObservableList

Styleable Properties

Property	Description	CSS Property	Type	Default Value
sliderMode	Specifies the slider mode. Can be DEFAULT (freely adjust the thumb) or SNAP_TO_TICKS (the thumb will always snap to ticks)	-mfx-slider-mode	SlideMode[Enum]	SliderMode.DEFAULT
unitIncrement	Specifies the value to add/subtract to the slider's value when an arrow key is pressed. The arrow keys depend on the slider orientation: HORIZONTAL: right, left; VERTICAL: up, down	-mfx-unit-increment	Double	10.0
alternativeUnitIncrement	Specifies the value to add/subtract to the slider's value when an arrow key and Shift or Ctrl are pressed	-mfx-alternative-unit-increment	Double	5.0
tickUnit	The value between each major tick mark in data units	-mfx-tick-count	Double	25.0
showMajorTicks	Specifies if the major ticks should be displayed or not	-mfx-show-major-ticks	Boolean	false
showMinorTicks	Specifies if the minor ticks should be displayed or not	-mfx-show-minor-ticks	Boolean	false
showTicksAtEdges	Specifies if the major ticks at the edge of the slider should be displayed or not. The ticks at the edge are those ticks which represent the min and max values	-mfx-show-ticks-at-edge	Boolean	true
minorTicksCount	Specifies how many minor ticks should be added between two major ticks	-mfx-minor-ticks-count	Integer	5
animateOnPress	When pressing on the slider's track the value is adjusted according to the mouse event coordinates. This property specifies if the progress bar adjustment should be animated or not	-mfx-animate-on-press	Boolean	true
bidirectional	If the slider is set to be bidirectional the progress bar will always start from 0. When the value is negative the progress bar grows in the opposite direction to 0. This works only if min is negative and max is positive, otherwise this option in ignored during layout. See the warning in the control documentation	-mfx-bidirectional	Boolean	true
orientation	Specifies the slider's orientation	-mfx-orientation	Orientation[Enum]	Orientation.HORIZONTAL
popupSide	Specifies the popup side. DEFAULT is above for horizontal orientation and left for vertical orientation. OTHER_SIDE is below for horizontal orientation and right for vertical orientation.	-mfx-popup-side	SliderPopupSide[Enum]	SlidePopupSide.DEFAULT

CSS Selectors

• .mfx-slider

• .mfx-slider .track

• .mfx-slider .axis (for the ticks)

• .mfx-slider .axis .axis-minor-tick-mark (for the minor ticks)

• .mfx-slider .tick-even (for even major ticks)

• .mfx-slider .tick-odd (for odd major ticks)

• .mfx-slider .bar

• .mfx-slider .thumb-container

• .mfx-slider .thumb-container .thumb (font icon)

• .mfx-slider .thumb-container .thumb-radius (font icon)

• .mfx-slider .thumb-container .mfx-ripple-generator