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 属性来设定默认值。