Javascript 向jquery移动滑块窗体添加比例

我正在尝试将jquery滑块添加到我的phonegap应用程序中。不幸的是，我还没有发现如何在滑块的两侧添加刻度。比如： “foo”---x-------“bar” 到现在为止，我只有滑块

<form>
    <label for="lighting">Rate us</label>
    <input type="range" name="rate" id="rate" min="1" max="7" />
    <input type="submit" name="go" id="go" value="Rate my app!"/>
</form>

评价我们

您可以添加带有记号的刻度，如下所示：

var ticks = '<div class="sliderTickmarks "><span>1</span></div>';
ticks += '<div class="sliderTickmarks "><span>2</span></div>';
ticks += '<div class="sliderTickmarks "><span>3</span></div>';
ticks += '<div class="sliderTickmarks "><span>4</span></div>';
ticks += '<div class="sliderTickmarks "><span>5</span></div>';
ticks += '<div class="sliderTickmarks "><span>6</span></div>';
ticks += '<div class="sliderTickmarks "><span>7</span></div>';
$("#rate ").closest(".ui-slider").find(".ui-slider-track").prepend(ticks);

.sliderTickmarks {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 16.6%;
    float: left;
    border-right: 1px solid #888;
}
.sliderTickmarks span {
    position: relative;
    left: 100%;
    top: 125%;
    margin-left: -3px;
    font-size: 12px;
    font-weight: normal;
}
.ui-slider-track > div.sliderTickmarks:first-child {
    border-right: 0;
    width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span {
    margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type {
    border-right: 0;
}

var ticks='1'；
滴答声+='2'；
滴答声+='3'；
滴答声+='4'；
滴答声+='5'；
滴答声+='6'；
滴答声+='7'；
$（“#速率”）.closest（“.ui滑块”）.find（“.ui滑块轨迹”）.prepend（刻度）；
.滑痕{
-webkit框大小：边框框；
框大小：边框框；
身高：100%；
宽度：16.6%；
浮动：左；
右边框：1px实心#888；
}
.滑块标记跨度{
位置：相对位置；
左：100%；
最高：125%；
左边距：-3px；
字体大小：12px；
字体大小：正常；
}
.ui滑块轨迹>div.sliderTickmarks:第一个子项{
右边界：0；
宽度：0；
}
.ui滑块轨迹>div.sliderTickmarks:第一个子跨度{
左边距：-5px；
}
.ui滑块轨迹>div.sliderTickmarks:类型的最后一个{
右边界：0；
}

有关使用滑块的其他想法，请查看以下内容：

---

你太棒了！谢谢！你提供的链接看起来也很有趣！