Question

I use jQuery UI Sliders to provide a answer scale for users… (Rate from 1 to 10)

$( ".scala" ).slider({
    range: "max",
    min: 1,
    max: 7,
    value: 4,
    change: function(event, ui) {
        ...
    }
});

My Problem is, the clickable areas (the ranges) are to small for a good click. But I don’t find any CSS to resize this areas. Maybe they are in JS?

Can someone help me and give me a hint, how I can resize zis clickable areas?

Answer 1

I’m not sure what you mean by “the clickable areas” as the slider itself and the handles are all clickable.

Anyway, you should be able to resize them with the following CSS:

For the slider, there are two CSS classes that defines the height in case it is horizontal or vertical:

.ui-slider-horizontal {
    height: .8em;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

For the handles:

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

DEMO