Creates a slider that picks a number from minimum to maximum in multiples of step,
starting at value.
A horizontal slider takes the parent's width unless width is given; a vertical one takes
its height. The thumb is white until changeSliderThumb changes it.
The name, the range, the value, the step, the direction, the colors, the optional size and the thumb flag
The slider
const slider = bitbybit.babylon.gui.slider.createSlider({ name: "radius", minimum: 1, maximum: 20, value: 5, step: 0.5, isVertical: false, color: "#f0cebb", background: "black", width: "300px", height: "40px", displayThumb: true });
panel.addControl(slider);
slider.onValueChangedObservable.add((value) => { console.log(value); });
Passes through the name of a slider event, its value changing, as a typed selector for code that subscribes to slider events by name.
The event selector
The same selector
Reads the color of the line around a slider's track.
The slider
The border color
Reads the color of the unfilled part of a slider's track.
The slider
The background color
Reads the largest value a slider can reach.
The slider
The maximum
Reads the smallest value a slider can reach.
The slider
The minimum
Reads the increment a slider moves in, 0 meaning smooth movement.
The slider
The step
Reads the current value of a slider, between its minimum and maximum.
The slider
The value
Reads the color of a slider's thumb as a CSS color string.
The slider
The thumb color
Reads the width of a slider's thumb, as a pixel string or a fraction.
The slider
The thumb width
Reads whether a slider runs bottom to top rather than left to right.
The slider
True when the slider is vertical
Reads whether a slider shows its thumb or only the track.
The slider
True when the thumb is shown
Reads whether a slider's thumb is round rather than square.
The slider
True when the thumb is round
Reads whether a slider's thumb stays inside the track at the ends instead of overhanging it.
The slider
True when the thumb is clamped
Restyles the thumb of a slider: round or square, its color and width, whether it stays inside the track and whether it is shown at all.
The slider, the thumb shape, color and width, the clamped flag and the display flag
The same slider
Sets the color of the line around a slider's track, as a CSS color.
The slider and the border color
The same slider
Sets the color of the unfilled part of a slider's track, as a CSS color.
The slider and the background color
The same slider
Sets the largest value a slider can reach, the value at its right or top end.
The slider and the maximum
The same slider
Sets the smallest value a slider can reach, the value at its left or bottom end.
The slider and the minimum
The same slider
Sets the increment a slider moves in, so 1 gives whole numbers only and 0 lets it move smoothly.
The slider and the step
The same slider
Moves a slider to a value, which fires its value changed event like a user drag would.
The slider and the value
The same slider
Sliders for picking a number between a minimum and a maximum by dragging a thumb, horizontally or vertically. Subscribe to the value changed event to react to the user; the range, step, value, colors and thumb can be changed after creation.