DHTMLX Little-Known Features: Custom Slider Control [Mini-Tutorial]

by
| |
8 minutes
| Leave a comment

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, dhtmlxSlider.

custom-slider

As a basis, we take a standard slider bar from the dhtmlxSuite package.

standard-slider

To create a new design, we need two slider elements – runner and track. 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’ll describe both horizontal and vertical sliders.

Initially, the following styles are responsible for the runner and track:

.dhtmlxslider_dhx_skyblue .dhxsl_runner { } – // for the runner
.dhtmlxslider_dhx_skyblue .dhxsl_cont_vr .dhxsl_track { }  – // for a horizontal track
.dhtmlxslider_dhx_skyblue .dhxsl_cont_hr .dhxsl_track { } – // for a vertical track
.dhtmlxslider_dhx_skyblue .dhxsl_track { } – // the common style in case of using images

We need to modify them to achieve the needed result.

With images:

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

Color styles:

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

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:

names-elements-slider

1) horizontal (mySlider1)

var mySlider1 = new dhtmlXSlider({
    parent: "sliderObj1",
    size:   150,
    value:  5,
    step:   1,
    min:    0,
    max:    150
});

2) vertical (mySlider2)

var mySlider2 = new dhtmlXSlider({
    parent: "sliderObj2",
    size:   200,
    value:  15,
    step:   5,
    min:    10,
    max:    90,
    vertical: true
});

To calculate how to fill the track, we need the following values:

– Max slider value:

max1 = mySlider1.getMax();
max2 = mySlider2.getMax();

– Slider containers:

var sliderDiv1 = document.getElementsByClassName("dhxsl_track")[0];
var sliderDiv2 = document.getElementsByClassName("dhxsl_track")[1];

– Length of the horizontal slider and height of the vertical sliders on the client side:

var sliderWidth = sliderDiv1.clientWidth;
var sliderHeight = sliderDiv2.clientHeight;

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 “colorize”. It has two properties – the values of mySlider1 и mySlider2.

colorize(mySlider1.getValue(), mySlider2.getValue());

Colorize() fucntion for two sliders will look like this:

function colorize(value1, value2){}

With images:

sliderInnerDiv1 = document.createElement("div");
sliderInnerDiv1.style.width = Math.max(Math.round(value1*sliderWidth/max1)+5, 0) + "px";
sliderInnerDiv1.style.height = "6px";
sliderInnerDiv1.style.backgroundImage = "url(newSkin/track_hr_full.png)";
sliderDiv1.appendChild(sliderInnerDiv1);

sliderInnerDiv2 = document.createElement("div");
sliderInnerDiv2.style.height = Math.max(Math.round(value2*sliderHeight/max2)-5, 0) + "px";
sliderInnerDiv2.style.width = "6px";
sliderInnerDiv2.style.position = "absolute";
sliderInnerDiv2.style.bottom = 0;
sliderInnerDiv2.style.backgroundImage = "url(newSkin/track_vr_full.png)";
sliderDiv2.appendChild(sliderInnerDiv2);

Color styles:

sliderInnerDiv1 = document.createElement("div");
sliderInnerDiv1.style.width = Math.max(Math.round(value1*sliderWidth/max1)+5, 0) + "px";
sliderInnerDiv1.style.height = "20px";
sliderInnerDiv1.style.backgroundColor = "#8FAE68";
sliderDiv1.appendChild(sliderInnerDiv1);

sliderInnerDiv2 = document.createElement("div");
sliderInnerDiv2.style.height = Math.max(Math.round(value2*sliderHeight/max2)-5, 0) + "px";
sliderInnerDiv2.style.width = "18px";
sliderInnerDiv2.style.position = "absolute";
sliderInnerDiv2.style.bottom = 0;
sliderInnerDiv2.style.backgroundColor = "#8FAE68";
sliderDiv2.appendChild(sliderInnerDiv2);

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 “reColorize”. It includes the following properties:

slider – the object of the slider that is used at the moment
value – a new set value of the slider that is used at the moment
width – the length of the horizontal slider //isn’t necessary if we don’t use this slider
height – the height of the vertical slider //isn’t necessary if we don’t use this slider

function reColorize(slider, value, width, height) {
    if (slider == mySlider1) {
        sliderInnerDiv1.style.width = width;
    }
    if (slider == mySlider2) {
        sliderInnerDiv2.style.height = height;
    }
}

reColorize function will be called in the “onChange” and “onSlideEnd” events.

With images:

mySlider1.attachEvent("onSlideEnd", function(value){
    newWidth = Math.max(Math.max(value*sliderWidth/max1)+5, 0) + "px";
    reColorize(this, value, newWidth, newHeight)
});
mySlider1.attachEvent("onChange", function(value){
    newWidth = Math.max(Math.round(value*sliderWidth/max1)+5, 0) + "px";
    reColorize(this, value, newWidth, newHeight)
});
mySlider2.attachEvent("onSlideEnd", function(value){
    newHeight = Math.max(Math.round(value*sliderHeight/max2)-5, 0) + "px";
    reColorize(this, value, newWidth, newHeight);
});
mySlider2.attachEvent("onChange", function(value){
    newHeight = Math.max(Math.round(value*sliderHeight/max2)-5, 0) + "px";
    reColorize(this, value, newWidth, newHeight)
});

Color styles:

mySlider1.attachEvent("onSlideEnd", function(value){
    newWidth = Math.max(Math.round(value*sliderWidth/max1)+5, 0) + "px";
    reColorize(this, value, newWidth, newHeight)
});
mySlider1.attachEvent("onChange", function(value){
    newWidth = Math.max(Math.round(value*sliderWidth/max1)+5, 0) + "px";
    reColorize(this, value, newWidth, newHeight)
});

mySlider2.attachEvent("onSlideEnd", function(value){
    newHeight = Math.max(Math.round(value*sliderHeight/max2)-5, 0) + "px";
    reColorize(this, value, newWidth, newHeight);
});
mySlider2.attachEvent("onChange", function(value){
    newHeight = Math.max(Math.round(value*sliderHeight/max2)-5, 0) + "px";
    reColorize(this, value, newWidth, newHeight)
});

As a result, we have nice-looking custom sliders. Drag the runner, try the live demo below!

So, that’s all. Hope this article was useful for you. Feel free to leave your comments below.

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components
Try for Free
30 days free of charge with official technical support