我正在努力让这个工作正常。我想在jquery mobile的滑块小部件（https://api.jquerymobile.com/slider/）中添加刻度线和自定义标签。首先，我想在0,25,50,75和100处添加刻度标记。在每个刻度线上方我会像自定义字符串/标签。最后，我希望随着页面大小的变化，标签随着jquery滑块缩放。现在我可以添加没有刻度的标签，但它只适合一个屏幕尺寸。
$( ".ui-content" ).on( "slidestop", function( event, ui ) {
event.preventDefault();
event.stopImmediatePropagation();
var newState = $("#slider-0").val();
} );<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" style="padding: 40px;">
<div role="main" class="ui-content">
<div class="labels" >
<label for="points" style="display: inline; padding: 55px;">volume off</label>
<label style="display: inline; padding: 50px;" for="points">quiet</label>
<label style="display: inline; padding: 50px;" for="points">normal</label>
<label style="display: inline; padding: 50px" for="points">loud</label>
<label style="display: inline; padding: 50px" for="points">max</label>
</div>
<input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
</div>
</div>
</div>
</body>
</html>
我尝试使用CSS％进行填充，但是这没有按预期工作。我还尝试了jQuery UI Slider Labels Under Slider，Add tick marks to jQuery slider?和Set font on custom span jQuery Mobile slider labels这里的建议，但我无法得到与刻度线保持对齐的刻度和标签。我认为这将是一个简单的格式化问题，但我无法将所有内容放在一起。任何帮助是极大的赞赏。
修改
经过一些研究后，我偶然发现了这个博客：https://css-tricks.com/equidistant-objects-with-css/，我尝试使用flex选项。所以我将flex样式添加到我的标签类中以获得<div class="labels" style="display: flex; justify-content: space-between;">。我在chrome和safari上测试了这个似乎工作正常。但我仍然不确定如何让滴答作用。
答案 0 :(得分：1)
前段时间我写了一篇博客文章，用于自定义jQM滑块小部件：
https://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/
这是一个添加刻度线和带滑块缩放的标签的示例。以下是更新的代码，使标签位于滑块上方而不是下方，并在CodePen中运行代码的演示：
<强> HTML
<div id="example2a" class="example" >
<label for="theSlider2a">Slider with Tick marks:</label>
<input type="range" name="theSlider2a" id="theSlider2" min="0" max="100" value="60" />
</div>
JavaScript （将您想要的标签文字放在跨度内）
var ticks = '<div class="sliderTickmarks "><span>volume off</span></div>';
ticks += '<div class="sliderTickmarks "><span>Quiet</span></div>';
ticks += '<div class="sliderTickmarks "><span>Normal</span></div>';
ticks += '<div class="sliderTickmarks "><span>Loud</span></div>';
ticks += '<div class="sliderTickmarks "><span>Max</span></div>';
$("#example2a .ui-slider-track").prepend(ticks);
<强> CSS
.sliderTickmarks{
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
float: left;
border-right: 1px solid #888;
}
.sliderTickmarks span{
position: relative;
left: 100%; top: -135%;
margin-left: -16px;
font-size: 12px; font-weight: normal; white-space: nowrap;
}
.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
答案 1 :(得分：0)
声音很脏，使用表格可以很好地显示这些标签。
<div role="main" class="ui-content">
<table class="labels">
<tr>
<td>volume off</td>
<td>quiet</td>
<td>normal</td>
<td>loud</td>
<td>max</td>
</tr>
</table>
<input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
</div>
答案 2 :(得分：0)
试试这个。我同意flexbox方法是最好的方法。你的刻度问题的答案可能是带有黑色边框的偏移div。
//I didn't touch this
$( ".ui-content" ).on( "slidestop", function( event, ui ) {
event.preventDefault();
event.stopImmediatePropagation();
var newState = $("#slider-0").val();
} );.labels {
display: flex;
justify-content: space-between;
width: 92.5%;
margin-left:7.5%
}
.verticalLine {
height:10px;
border-left: solid black;
margin-left: 50%;
}<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" style="padding: 40px;">
<!-- Remove padding. Add tick divs -->
<div role="main" class="ui-content">
<div class="labels" >
<label for="points" style="display: inline;">volume off
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">quiet
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">normal
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">loud
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">max
<div class="verticalLine"></div>
</label>
</div>
<input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
</div>
</div>
</div>
</body>
</html>