Jquery UI 滑块，中间为 0，背景为那里

Question

我想要一个范围从 -5 到 5 并且中间为 0 的滑块。 背景颜色将从0开始变化

到目前为止，我只能在这里使用 2 个滑块来做到这一点： http://jsfiddle.net/ur4SH/

<div class="sliders">
   <div id="sliderLeft" class="slider left"></div>
   <div id="sliderRight" class="slider right"></div>
</div>

但它不是很优雅，而且有一些我不喜欢的东西：

1. 使用 2 个滑块而不是 1 个
2. 我有两个处理程序，我只想要一个
3. 滑块 3 之间的拖动不起作用。

您有什么想法可以改进吗？或者是否存在任何只使用一个滑块的解决方案？

Answer 1

你的意思是改变背景颜色，像这样jsFiddle？

我在 CSS 中添加了一个新类：

.color {
    background-color: green;   
}

还有一点 JS，第 15 行：

$('.ui-slider-range', this).addClass('color');