CODEWITHSUNDEEP
jquery-mobile
Gthoma2
Gthoma2

Reputation: 707

How to change size of jQuery Mobile Slider elements?

I need to make my jQuery mobile slider rails thicker. I also need to make the knob of the slider larger as well. I have visited other SO threads and tried to change the CSS rules of the slider. The class of the slider widgets has been set to jquerymobileslider. Here is the relevant contents of a tag within my index.html:

.jquerymobileslider .ui-slider {
    height: 50px;
}

.jquerymobileslider .ui-slider .ui-slider-handle {
    height: 50px;
    width: 50px;
}

However I see no changes.

Any ideas?

Upvotes: 2

Views: 1977

Answers (1)

Michael Pasqualone
Michael Pasqualone

Reputation: 2037

The default height is already 50px, try the following ensuring it's applied after the default CSS styles and see if you notice any visual changes:

.ui-slider-track {
    height: 75px;
}
.ui-slider-handle {
    height: 75px;
    top: 0%;
}

Upvotes: 3

Related Questions