{"id":2572,"date":"2014-12-02T18:06:17","date_gmt":"2014-12-02T14:06:17","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2572"},"modified":"2023-05-05T13:51:13","modified_gmt":"2023-05-05T10:51:13","slug":"custom-slider-control","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/custom-slider-control\/","title":{"rendered":"DHTMLX Little-Known Features: Custom Slider Control [Mini-Tutorial]"},"content":{"rendered":"

If you face the necessity to include a slider control into your app or website and want to customize it to meet your design requirements, then this article for you – here you will learn how to create new skins for the simple JavaScript slider control<\/a>, dhtmlxSlider.<\/p>\n

\"custom-slider\"<\/p>\n

As a basis, we take a standard slider bar<\/a> from the dhtmlxSuite package.<\/p>\n

\"standard-slider\"<\/p>\n

To create a new design, we need two slider elements – runner<\/strong> and track<\/strong>. These elements can be both a div and an image (depends on the complexity of the required view). Remember of the image for a vertical slider, if you need it. We\u2019ll describe both horizontal and vertical sliders.
\n
\nInitially, the following styles are responsible for the runner and track:<\/p>\n

.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_runner<\/span> {<\/span> }<\/span> \u2013 \/\/ for the runner
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_cont_vr<\/span> .dhxsl_track<\/span> {<\/span> }<\/span>  \u2013 \/\/ for a horizontal<\/span> track
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_cont_hr<\/span> .dhxsl_track<\/span> {<\/span> }<\/span> \u2013 \/\/ for a vertical<\/span> track
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_track<\/span> {<\/span> }<\/span> \u2013 \/\/ the common style in case of using images<\/div><\/div>\n

We need to modify them to achieve the needed result. <\/p>\n

With images:<\/p>\n

.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_runner<\/span> {<\/span>
\n    background-image<\/span>:<\/span> url<\/span>(<\/span>newSkin\/ball.png<\/span>)<\/span>;<\/span>
\n    border<\/span>:<\/span> none<\/span> !important;<\/span>
\n}<\/span>
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_cont_vr<\/span> .dhxsl_track<\/span> {<\/span>
\n    width<\/span>:<\/span> 6px<\/span>;<\/span>
\n    background-image<\/span>:<\/span> url<\/span>(<\/span>newSkin\/track_vr_empty.png<\/span>)<\/span>;<\/span>
\n    border<\/span>:<\/span> none<\/span> !important;<\/span>
\n}<\/span>
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_cont_hr<\/span> .dhxsl_track<\/span> {<\/span>
\n    height<\/span>:<\/span> 6px<\/span>;<\/span>
\n    background-image<\/span>:<\/span> url<\/span>(<\/span>newSkin\/track_hr_empty.png<\/span>)<\/span>;<\/span>
\n    border<\/span>:<\/span> none<\/span> !important;<\/span>
\n}<\/span><\/div><\/div>\n

Color styles:<\/p>\n

.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_runner<\/span> {<\/span>
\n    background-color<\/span>:<\/span> #E6F7D1<\/span>;<\/span>
\n    background-image<\/span>:<\/span> none<\/span> !important;<\/span>
\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #2A3A15<\/span>;<\/span>
\n    border-radius<\/span>:<\/span> 2px<\/span>;<\/span>
\n    width<\/span>:<\/span> 18px<\/span>;<\/span>
\n    height<\/span>:<\/span> 18px<\/span>;<\/span>
\n}<\/span>
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_cont_vr<\/span> .dhxsl_track<\/span> {<\/span>
\n    width<\/span>:<\/span> 18px<\/span>;<\/span>
\n    background<\/span>:<\/span> linear-gradient(<\/span>to bottom<\/span>,<\/span> #fefcea<\/span>,<\/span> #8FAE68<\/span>)<\/span>;<\/span>
\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #77A63B<\/span>;<\/span>
\n}<\/span>
\n.dhtmlxslider_dhx_skyblue<\/span> .dhxsl_cont_hr<\/span> .dhxsl_track<\/span> {<\/span>
\n    height<\/span>:<\/span> 18px<\/span>;<\/span>
\n    background<\/span>:<\/span> linear-gradient(<\/span>to left<\/span>,<\/span> #fefcea<\/span>,<\/span> #8FAE68<\/span>)<\/span>;<\/span>
\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #77A63B<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

The next step is to create a folder for a new skin, we call it “newSkin”, and then use the following names for the images:<\/p>\n

\"names-elements-slider\"<\/p>\n

1) horizontal (mySlider1)<\/p>\n

var<\/span> mySlider1 =<\/span> new<\/span> dhtmlXSlider(<\/span>{<\/span>
\n    parent:<\/span> "sliderObj1"<\/span>,<\/span>
\n    size:<\/span>   150<\/span>,<\/span>
\n    value:<\/span>  5<\/span>,<\/span>
\n    step:<\/span>   1<\/span>,<\/span>
\n    min:<\/span>    0<\/span>,<\/span>
\n    max:<\/span>    150<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

2) vertical (mySlider2)<\/p>\n

var<\/span> mySlider2 =<\/span> new<\/span> dhtmlXSlider(<\/span>{<\/span>
\n    parent:<\/span> "sliderObj2"<\/span>,<\/span>
\n    size:<\/span>   200<\/span>,<\/span>
\n    value:<\/span>  15<\/span>,<\/span>
\n    step:<\/span>   5<\/span>,<\/span>
\n    min:<\/span>    10<\/span>,<\/span>
\n    max:<\/span>    90<\/span>,<\/span>
\n    vertical:<\/span> true<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

To calculate how to fill the track, we need the following values: <\/p>\n

– Max slider value:<\/p>\n

max1 =<\/span> mySlider1.getMax<\/span>(<\/span>)<\/span>;<\/span>
\nmax2 =<\/span> mySlider2.getMax<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

– Slider containers:<\/p>\n

var<\/span> sliderDiv1 =<\/span> document.getElementsByClassName<\/span>(<\/span>"dhxsl_track"<\/span>)<\/span>[<\/span>0<\/span>]<\/span>;<\/span>
\nvar<\/span> sliderDiv2 =<\/span> document.getElementsByClassName<\/span>(<\/span>"dhxsl_track"<\/span>)<\/span>[<\/span>1<\/span>]<\/span>;<\/span><\/div><\/div>\n

– Length of the horizontal slider and height of the vertical sliders on the client side:<\/p>\n

var<\/span> sliderWidth =<\/span> sliderDiv1.clientWidth<\/span>;<\/span>
\nvar<\/span> sliderHeight =<\/span> sliderDiv2.clientHeight<\/span>;<\/span><\/div><\/div>\n

The position of the runner that was initially set should be considered for color\/image filling at the initialization stage. Since this function is called just once (at init), we call it \u201ccolorize\u201d. It has two properties – the values of mySlider1 \u0438 mySlider2.<\/p>\n

colorize(<\/span>mySlider1.getValue<\/span>(<\/span>)<\/span>,<\/span> mySlider2.getValue<\/span>(<\/span>)<\/span>)<\/span>;<\/span><\/div><\/div>\n

Colorize() fucntion for two sliders will look like this:<\/p>\n

function<\/span> colorize(<\/span>value1,<\/span> value2)<\/span>{<\/span>}<\/span><\/div><\/div>\n

With images:<\/p>\n

sliderInnerDiv1 =<\/span> document.createElement<\/span>(<\/span>"div"<\/span>)<\/span>;<\/span>
\nsliderInnerDiv1.style<\/span>.width<\/span> =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value1*<\/span>sliderWidth\/<\/span>max1)<\/span>+<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\nsliderInnerDiv1.style<\/span>.height<\/span> =<\/span> "6px"<\/span>;<\/span>
\nsliderInnerDiv1.style<\/span>.backgroundImage<\/span> =<\/span> "url(newSkin\/track_hr_full.png)"<\/span>;<\/span>
\nsliderDiv1.appendChild<\/span>(<\/span>sliderInnerDiv1)<\/span>;<\/span>
\n
\nsliderInnerDiv2 =<\/span> document.createElement<\/span>(<\/span>"div"<\/span>)<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.height<\/span> =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value2*<\/span>sliderHeight\/<\/span>max2)<\/span>-<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.width<\/span> =<\/span> "6px"<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.position<\/span> =<\/span> "absolute"<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.bottom<\/span> =<\/span> 0<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.backgroundImage<\/span> =<\/span> "url(newSkin\/track_vr_full.png)"<\/span>;<\/span>
\nsliderDiv2.appendChild<\/span>(<\/span>sliderInnerDiv2)<\/span>;<\/span><\/div><\/div>\n

Color styles:<\/p>\n

sliderInnerDiv1 =<\/span> document.createElement<\/span>(<\/span>"div"<\/span>)<\/span>;<\/span>
\nsliderInnerDiv1.style<\/span>.width<\/span> =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value1*<\/span>sliderWidth\/<\/span>max1)<\/span>+<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\nsliderInnerDiv1.style<\/span>.height<\/span> =<\/span> "20px"<\/span>;<\/span>
\nsliderInnerDiv1.style<\/span>.backgroundColor<\/span> =<\/span> "#8FAE68"<\/span>;<\/span>
\nsliderDiv1.appendChild<\/span>(<\/span>sliderInnerDiv1)<\/span>;<\/span>
\n
\nsliderInnerDiv2 =<\/span> document.createElement<\/span>(<\/span>"div"<\/span>)<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.height<\/span> =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value2*<\/span>sliderHeight\/<\/span>max2)<\/span>-<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.width<\/span> =<\/span> "18px"<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.position<\/span> =<\/span> "absolute"<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.bottom<\/span> =<\/span> 0<\/span>;<\/span>
\nsliderInnerDiv2.style<\/span>.backgroundColor<\/span> =<\/span> "#8FAE68"<\/span>;<\/span>
\nsliderDiv2.appendChild<\/span>(<\/span>sliderInnerDiv2)<\/span>;<\/span><\/div><\/div>\n

When we change the position of the slider runner or if it stops moving, we need to recount the length (height) of the color\/image. We call this function \u201creColorize\u201d. It includes the following properties: <\/p>\n

slider \u2013 the object of the slider that is used at the moment
\nvalue \u2013 a new set value of the slider that is used at the moment
\nwidth \u2013 the length of the horizontal slider \/\/isn\u2019t necessary if we don\u2019t use this slider
\nheight \u2013 the height of the vertical slider \/\/isn\u2019t necessary if we don\u2019t use this slider<\/p>\n

function<\/span> reColorize(<\/span>slider,<\/span> value,<\/span> width,<\/span> height)<\/span> {<\/span>
\n    if<\/span> (<\/span>slider ==<\/span> mySlider1)<\/span> {<\/span>
\n        sliderInnerDiv1.style<\/span>.width<\/span> =<\/span> width;<\/span>
\n    }<\/span>
\n    if<\/span> (<\/span>slider ==<\/span> mySlider2)<\/span> {<\/span>
\n        sliderInnerDiv2.style<\/span>.height<\/span> =<\/span> height;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

reColorize function will be called in the \u201conChange\u201d and “onSlideEnd” events. <\/p>\n

With images:<\/p>\n

mySlider1.attachEvent<\/span>(<\/span>"onSlideEnd"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newWidth =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.max<\/span>(<\/span>value*<\/span>sliderWidth\/<\/span>max1)<\/span>+<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>
\n}<\/span>)<\/span>;<\/span>
\nmySlider1.attachEvent<\/span>(<\/span>"onChange"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newWidth =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderWidth\/<\/span>max1)<\/span>+<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>
\n}<\/span>)<\/span>;<\/span>
\nmySlider2.attachEvent<\/span>(<\/span>"onSlideEnd"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newHeight =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderHeight\/<\/span>max2)<\/span>-<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\nmySlider2.attachEvent<\/span>(<\/span>"onChange"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newHeight =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderHeight\/<\/span>max2)<\/span>-<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Color styles:<\/p>\n

mySlider1.attachEvent<\/span>(<\/span>"onSlideEnd"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newWidth =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderWidth\/<\/span>max1)<\/span>+<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>
\n}<\/span>)<\/span>;<\/span>
\nmySlider1.attachEvent<\/span>(<\/span>"onChange"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newWidth =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderWidth\/<\/span>max1)<\/span>+<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\nmySlider2.attachEvent<\/span>(<\/span>"onSlideEnd"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newHeight =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderHeight\/<\/span>max2)<\/span>-<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\nmySlider2.attachEvent<\/span>(<\/span>"onChange"<\/span>,<\/span> function<\/span>(<\/span>value)<\/span>{<\/span>
\n    newHeight =<\/span> Math<\/span>.max<\/span>(<\/span>Math<\/span>.round<\/span>(<\/span>value*<\/span>sliderHeight\/<\/span>max2)<\/span>-<\/span>5<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> "px"<\/span>;<\/span>
\n    reColorize(<\/span>this<\/span>,<\/span> value,<\/span> newWidth,<\/span> newHeight)<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

As a result, we have nice-looking custom sliders. Drag the runner, try the live demo below!<\/strong><\/p>\n

\n\n\n\n\n<\/table>\n<\/div>\n\n
\n
<\/div>\n<\/td>\n
\n
<\/div>\n<\/td>\n<\/tr>\n
\n
<\/div>\n<\/td>\n
\n
<\/div>\n<\/td>\n<\/tr>\n