jquery UI滑块旋转

Question

我正在使用jquery-ui's slider，因为input[type=range]在所有浏览器中看起来都不一样，并且无法让它在浏览器中看起来完全相同（我的目标受众使用的是所有最新浏览器）。

现在我在页面中有多个jQuery-ui滑块。我想使用CSS3旋转它们，以创建自定义复杂控件（需要统一的范围/滑块控件的外观）。以下是我到目前为止的情况：

HTML：

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

JavaScript的：

$('.slider').slider({
    min: 1, max: 10, step: 1
});

CSS：

.slider:last-of-type {
    transform: rotate(150deg); /* you can try with 180deg to see a clear difference */
}

它旋转得很好，但它的行为是反转的：当我们点击滚动条的一端时，它会将旋钮移动到反面。

我也试过旋转input[type=range]，但它没有出现这个问题。

• 有没有一种快速方法可以在jQuery-UI滑块中修复此问题？

（如果没有）

• 是否有其他库，它提供类似的范围控制，在（最新）浏览器中具有统一的外观？