Question

I’m using this fantastic jQuery Slider plugin, which is optimized for mobile devices and it works very well with scales and numbers.

Now I want to increase the handles and the slider itself, does anybody know how to do it?

Answer 1

You would need to edit both the image assets and the .css file, below is a portion of the css you would be editing..

//---------------------------------------------//
   .jslider .jslider-pointer {
    width: 13px;//<--  increase the width here to match your new image...
    height: 15px;//<--  increase the height here to match your new image...
    background-position: 0 -40px; // you'll be editing this here as well based on what changes you make to the image, which is a imagemap of multiple different distinct image elements in jslider. any changes here need to be applied throughout to other elements
    position: absolute;
    left: 20%;
    top: -4px;
    margin-left: -6px;
    cursor: pointer;
    cursor: hand;
    }
//---------------------------------------------//
    .jslider .jslider-bg i, .jslider .jslider-pointer {
    background: url(../img/jslider.png) no-repeat 0 0;//<-- edit this image to the dimensions you need
    }
//---------------------------------------------//