JFoenix中文教程：8、JFXSlider滑动组件

JFoenix提供的滑动组件为JFXSlider，JFXSlider样式如下：

取值结果（左一滑动器）输出：

17.202797202797203

对应源码如下：

Fxml：

<StackPane layoutX="50" layoutY="30">
	<VBox spacing="50" maxWidth="450" maxHeight="600" alignment="CENTER">
		<children>
			<HBox spacing="100" alignment="CENTER">
				<children>
					<JFXSlider value="20" fx:id="slider" orientation="VERTICAL" prefHeight="300" styleClass="jfx-slider-colored"></JFXSlider>
					<JFXSlider orientation="VERTICAL" styleClass="jfx-slider-style" maxHeight="200"></JFXSlider>
					<JFXSlider orientation="VERTICAL" prefHeight="200" disable="true"></JFXSlider>
					<JFXButton prefWidth="80" prefHeight="30" buttonType="RAISED" text="取值" onAction="#get"
							   style="-fx-font-size: 12px; -fx-background-color: #FF8C00;"/>
				</children>
			</HBox>
			<JFXSlider prefWidth="400"></JFXSlider>
			<JFXSlider styleClass="jfx-slider-style" maxWidth="300"></JFXSlider>
			<JFXSlider prefWidth="400" disable="true"></JFXSlider>
		</children>
	</VBox>
</StackPane>

CSS：

.jfx-slider-colored {
    -jfx-default-thumb: #5264AE;
    -jfx-default-track: #212121;
}

.jfx-slider-style {
    -jfx-indicator-position: right;
}

.jfx-slider-style > .thumb {
    -fx-background-color: #03a9f4;
}

.jfx-slider-style .track {
    -fx-background-color: #ff5252;
    -fx-pref-height: 5px;
    -fx-pref-width: 5px;
}

.jfx-slider-style .animated-thumb {
    -fx-background-color: darkorange;
}

.jfx-slider-style .sliderValue {
    -fx-stroke: WHITE;
    -fx-font-size: 10.0;
}

Java：

@FXMLController
public class JFoenixViewController {

    @FXML
    private JFXSlider slider;

    public void get() {
        double value = slider.getValue();
        System.out.println(value);
    }
}

以上，orientation 用于设置滑动器的方向：HORIZONTAL（横向）、VERTICAL（竖向），默认为 HORIZONTAL。JFXSlider 值范围为 0 - 100，默认值是 50 ，可使用 value 属性来设定默认值。