Slider plugin

[
](https://www.silexlabs.org/?attachment_id=86282)
This plugin install two components
a slider and a progress bar.They are both the same component with different default parameters.

2 components

When adding a slider component, the progress bar of the component is hidden and the handle shown whereas when adding a progress bar, the progress bar is visible and the handle hidden.

Parameters

Show Handle

If the checkbox is checked, display an handle that the user can use to change the slider value. It is useful to hide it when the component is used as a progress bar.

Show Progress Bar

If the checkbox is checked, display the progress bar representing the progress of the slider, if the progress is 50%, then the progress will take half the width of the component. It is useful to hide it when the component is used as a simple slider.

Show Background

If the checkbox is checked, display the background of the slider

Active Drag

If the checkbox is checked, each time the user moves the slider’s handle an “onSlide” event is sent (see below “using the onSlide action”), whereas it is only sent once the user release the handle if not.

Min value

This is the minimum value that the slider can take. In most cases it will be 0. It means that when the slider’s handle is at the left of the slider, the slider progress value will be the Min value.

Max value

This is the maximum value that the slider can take. In most cases it will be 100 or 10. It means that when the slider’s handle is at the right of the slider, the slider progress value will be the Max value.

ex
if the slider is used to control the volume of an audio component, the min value will be 0 and the max value will 100 or 10 based on the volume parameter of the audio component.

Progress

It represent the current position of the handle based on the min value and max value parameters. For instance, if the min value is 0, the max value is 100 and the handle is at the exact center of the slider, then the progress value will be 50.

Step

This is the interval between two possible progress values. In most case, it will be 1. For instance, if the min value is 0, the max value is 10 and the step is 1, the possible progress values will be
0,1,2,3,4,5,6,7,8,9,10. If the step is 2, the possible values will be
0,2,4,6,8,10.

Exemple

Using the slider to control the volume of an audio component

In this exemple, I have in a site a slider named “Slider” with the following parameters
minValue
0,
max value
100,
step
1,
progress
0.
I also have an audio component named “Audio”. In the slider actions, I add the following action
onSlide Audio.volume=<<Slider.progress>>

When the user moves the handle of the slider, the volume of the Audio component changes, it takes the value of the progress parameter of the slider. If “Active drag” is checked, the volume changes as the handle move, else it changes when the user releases the handle.

Skinning the slider

The slider can be skinned with the source available here

Rejoignez nous