如何在具有固定范围的jQuery UI滑块中调整可点击区域的大小

Question

我使用jQuery UI Sliders为用户提供答案量级（从1到10的比率）

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

我的问题是，可点击的区域（范围）对于良好的点击来说是小的。但是我找不到任何CSS来调整这个区域的大小。也许他们在JS？

有人可以帮助我并给我一个提示，我如何调整zis可点击区域的大小？

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