Как изменить размер интерактивной области в слайдере пользовательского интерфейса jQuery с фиксированными диапазонами

Question

Я использую ползунки пользовательского интерфейса jQuery, чтобы предоставить пользователям шкалу ответов ... (от 1 до 10)

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

Моя проблема в том, что интерактивные области (диапазоны) малыхороший клик.Но я не нахожу CSS для изменения размеров этих областей.Может быть, они в JS?

Может ли кто-нибудь помочь мне и дать мне подсказку, как я могу изменить размеры кликабельных областей?

Answer 1

Я не уверен, что вы подразумеваете под "интерактивными областями", так как сам ползунок и все маркеры являются интерактивными.

В любом случае, вы должны иметь возможность изменить их размер с помощью следующего CSS:

Для слайдера есть два класса CSS, которые определяют высоту в случае, если она горизонтальная или вертикальная:

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

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

Для ручек:

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

DEMO