滑块Jquery mobile中缺少句柄视图

Question

您好，在我的jquery移动应用程序中，我错过了处理程序，我用 div 组成了滑块我希望它看起来如下

首先，我无法看到句柄，而且我想在句柄中看到一个值，我正在按以下方式进行操作

HTML：

 <div id="slider">

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

    </div>

的Javascript

$("#slider").slider({

});

的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;
}

感谢任何帮助。

Answer 1

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

  

<强> DEMO

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

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

在代码中，将颜色div插入滑块增强时创建的jQM滑块轨道：

$(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);

});

这是CSS：

.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;
}

注意：如果您希望图像中的轨道更高，则可以根据需要调整CSS。

  

更高的赛道 DEMO