Change Slider Vertical Handle to Image

Question

462 views Asked by dhayyati At 26 May 2016 at 07:18

I'm using jquery-ui-1.10.3.custom.min.css and I tried to change the slider handle into image.

It works when I use following CSS and HTML.

CSS:

.slider-basic .ui-slider-handle {
   width:50;
   height: 50;
   background: url(images/slider/50x50.png) no-repeat;
   border: none;
}

HTML:

<html>
    <div class="slider slider-basic bg-red"></div>
</html>

But I need to change my slider into vertical, so the HTML becomes

<div id="slider-vertical" class="slider bg-green"></div>

and the CSS does not seem to work at all. Could you please help me find out why?

There are 1 answers

**Twisty** · Answer 1 · 2016-05-27T15:30:53+00:00

If the HTML is like so:

<div id="slider-vertical" class="slider bg-green"></div>

You'd want the following CSS:

#slider-vertical .ui-slider-handle {
   background: url(images/slider/50x50.png) no-repeat;
   border: none;
}

In your previous HTML you set the class. In this new HTML, you set the ID.