向 jquery 移动滑块表单添加比例答案

【问题标题】：Add a scale to a jquery mobile slider form向 jquery 移动滑块表单添加比例
【发布时间】：2015-06-30 13:37:26
【问题描述】：

我正在尝试将 jquery 滑块添加到我的 phonegap 应用程序中。不幸的是，我还没有发现如何在滑块的两侧添加比例。就像是： “富” -x------ “酒吧” 到现在我只有滑块。

<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>

【问题讨论】：

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

您可以像这样添加带有刻度线的刻度：

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

DEMO

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

https://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/

【讨论】：

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