JavaFX has its own version of many of Java's swing components, one of them is the SwingSlider. The SwingSlider is a simple slider bar tied to a variable. When the slider is moved the linked variable is updated to reflect the new slider position.
Key Variables
value Integer variable to which the slider is bound
minimum Minimum value of the slider
maximum Maximum value of the slider
vertical Orientation of the slider. (true for a vertical slider)
width Length of the slider bar (if horizontal)
height Length of the slider bar (if vertical)
translateX x position of the slider
translateY y position of the slider
SwingSlider with an Integer
bind variable with inverse is used when binding the variable to the slider so that the slider access to update the variable.
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.Text; import javafx.ext.swing.SwingSlider; var sliderInteger = 0; Stage { title: "SwingSlider Demo" scene: Scene { width: 300 height: 100 content: [ Text { x:10 y:30 content: bind "Integer Value: {sliderInteger}" } SwingSlider{ translateX: 10 translateY: 40 minimum: -10 maximum: 10 value: bind sliderInteger with inverse; } ] } }
SwingSlider with a Float
A slider can be used to adjust float values by casting the integer associated with the slider as a Float. To increase the precision of the float, the integer number can be inflated and then divided by the amount of inflation when converting to a float.
Let's say, for example, we wanted a slider to represent a float value between -1.5 and 2.0. First we set the minimum and maximum integer values to -15 and 20 respectively. Then by dividing the slider value by 10.0 we get a float value in our range.
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.Text; import javafx.ext.swing.SwingSlider; var sliderInteger = 0; var floatValue = bind (sliderInteger/10.0) as Float; Stage { title: "SwingSlider Demo" scene: Scene { width: 300 height: 100 content: [ Text { x:10 y:30 content: bind "Float Value: {floatValue}" } SwingSlider{ translateX: 10 translateY: 40 minimum: -15 maximum: 20 value: bind sliderInteger with inverse; } ] } }
Psychedelic Slider
The color of a SwingSlider can't be changed but a DropShadow effect can be added for a little pizzazz.
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.ext.swing.SwingSlider; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.scene.effect.DropShadow; var sliderInteger = 0; Stage { title: "SwingSlider Demo" scene: Scene { width: 300 height: 100 content: [ Rectangle{ width:300 height:100 fill:Color.BLACK } SwingSlider{ translateX: 50 translateY: 40 minimum: 0 maximum: 359 value: bind sliderInteger with inverse; effect: DropShadow{ radius: 50 spread: .65 color: bind Color.hsb(sliderInteger, 1.0, 1.0 ) } } ] } }