Javascript 滑块Jquery mobile中缺少句柄视图

您好，在我的jquery移动应用程序中，我缺少处理程序，我用div组成了滑块，我希望它如下所示

首先，我看不到句柄，我想在句柄中看到一个值，如下所示

HTML:

 <div id="slider">

        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>

    </div>

Css

#slider {
    height: 30px;
    width: 300px;
}
#red {
    height: 30px;
    width: 100px;
    background-color: red;
    float: left;
}
#green {
    height: 30px;
    width: 100px;
    background-color: green;
    float: left;
}
#blue {
    height: 30px;
    width: 100px;
    background-color: blue;
    float: left;
}

---

非常感谢您的帮助。

如果您想使用jQM slider小部件，只需在slider track中添加3个颜色段，您可以这样做：

滑块使用标准标记，为了方便起见，我将其放在一个容器中：

<div id="sliderContainer" >
    <label for="theSlider">A Slider:</label>
    <input type="range" name="theSlider" id="theSlider" min="0" max="200" value="60" />
</div>

注意：如果你想让轨迹更高，就像在你的图像中一样，你可以根据口味调整CSS

更高的轨道

---

您是在寻找一个具有多色背景的连续滑块，还是一个3状态翻转开关（）@ezanker..非常感谢..有可能修复处理程序吗。我想要的是我想要设置一个值，并且用户不能移动处理程序？是的，将滑块设置为禁用，并将禁用的CSS调整为完全不透明度：

<div id="sliderContainer" >
    <label for="theSlider">A Slider:</label>
    <input type="range" name="theSlider" id="theSlider" min="0" max="200" value="60" />
</div>

$(document).on("pagecreate", "#page1", function(){
    var colorback = '<div class="sliderBackColor red">Low</div><div class="sliderBackColor green">Medium</div><div class="sliderBackColor blue">High</div>';

    $("#sliderContainer .ui-slider-track").prepend(colorback);

});

.sliderBackColor{
    height: 100%;
    width: 33.33%;    
    float: left;
    color: white;
    text-align: center;
    font-size: 10px;
    font-weight: normal;
    text-shadow: 0;
}
.red {
    background-color: red;
    border-top-left-radius: 0.3125em;
    border-bottom-left-radius: 0.3125em;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
    border-top-right-radius: 0.3125em;
    border-bottom-right-radius: 0.3125em;
}