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

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

Leave a Reply