RangeSlider

RangeSlider

The RangeSlider is a simple alternative to Slider which allows users to specify a range with two knobs. The layout of the internal components is improved over Slider's implementation as well, making knob positioning much more intuitive.

RangeSliderStyle

All the fields for RangeSliderStyle are optional. knobBegin is oriented on the left side and represents the start of the selected range. knobEnd is oriented on the right side and represents the end of the selected range.

• background: a drawable that is displayed behind all the other components. It is the main bar that represents the unfilled range. The padding of the drawable defines the area where the progressKnob is drawn and the minimum/maximum positions of the knobs.
• backgroundDisabled: the disabled state of the background.
• progressKnob: a drawable this is drawn between the positions of the beginning and end of the range.
• progressKnobDisabled: the disabled state of progressKnob
• knobBeginUp: a drawable representing the beginning knob when the user is not pressing the mouse button or hovering over it.
• knobBeginOver: a drawable representing the beginning knob when the user is hovering over it and not pressing the mouse button.
• knobBeginDown: a drawable representing the beginning knob when the user is pressing the mouse button on the knob. It remains in this state as the user drags it across the stage.
• knobBeginDisabled: the disabled state of knobBegin
• knobEndUp: a drawable representing the ending knob when the user is not pressing the mouse button or hovering over it.
• knobEndOver: a drawable representing the ending knob when the user is hovering over it and not pressing the mouse button.
• knobEndDown: a drawable representing the ending knob when the user is pressing the mouse button on the knob. It remains in this state as the user drags it across the stage.
• knobEndDisabled: the disabled state of knobEnd

How to use RangeSlider

Define a RangeSliderStyle and create a RangeSlider:

RangeSliderStyle style = new RangeSliderStyle();
style.background = skin.getDrawable("range-slider-background");
style.backgroundDisabled = skin.getDrawable("range-slider-background-disabled");
style.knobBeginUp = skin.getDrawable("range-slider-knob-up");
style.knobBeginOver = skin.getDrawable("range-slider-knob-over");
style.knobBeginDown = skin.getDrawable("range-slider-knob-down");
style.knobBeginDisabled = skin.getDrawable("range-slider-knob-disabled");
style.progressKnob = skin.getDrawable("range-slider-progress");
style.progressKnobDisabled = skin.getDrawable("range-slider-progress-disabled");
style.knobEndUp = skin.getDrawable("range-slider-knob");
style.knobEndOver = skin.getDrawable("range-slider-knob-over");
style.knobEndDown = skin.getDrawable("range-slider-knob-down");
style.knobEndDisabled = skin.getDrawable("range-slider-knob-disabled");

final RangeSlider rangeSlider = new RangeSlider(style);

Or load the style from a skin.

RangeSlider rangeSlider = new RangeSlider(skin, "styleName");

Then set the properties of your slider:

rangeSlider.setIncrement(1); //the incremental value that the knob positons are rounded to
rangeSlider.setMinimum(0); //the minimum value that either knob can be set to
rangeSlider.setMaximum(100); //the maximum value that either knob can be set to
rangeSlider.setValueBegin(0);//the initial value of the knob on the left
rangeSlider.setValueEnd(100);// the initial value of the know on the right

Then add it to your layout:

table.add(rangeSlider);

Retrieving the values of the slider is a simple operation:

rangeSlider.addListener(new ChangeListener() {
    @Override
    public void changed(ChangeEvent event, Actor actor) {
        System.out.println("begin = " + rangeSlider.getValueBegin() + " end = " + rangeSlider.getValueEnd());
    }
});