自定义 jquery 个移动滑块标签

Question

我正在努力让它正常工作。我想将刻度线和自定义标签添加到 jquery 移动设备的滑块小部件 (https://api.jquerymobile.com/slider/) 首先，我想在 0、25、50、75 和 100 处添加刻度线标记。在每个刻度线上方我会就像一个习俗 string/label。最后，我希望标签随着页面大小的变化与 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, here Add tick marks to jQuery slider? and here Set font on custom span jQuery Mobile slider labels 但我无法让刻度线和标签与滑块保持一致。我认为这将是一个简单的格式问题，但我无法将所有内容放在一起。任何帮助是极大的赞赏。

编辑

经过更多研究后，我偶然发现了这个博客：https://css-tricks.com/equidistant-objects-with-css/ 从中我尝试了使用 flex 的选项。所以我将 flex 样式添加到我的标签 class 以获得 <div class="labels" style="display: flex; justify-content: space-between;">。我在 chrome 和 safari 上测试过它似乎工作正常。但我仍然不确定如何让滴答声起作用。

Answer 1

可能听起来很脏，使用 table 可以很好地显示这些标签。

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

Answer 2

尝试一下。我同意 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>

Answer 3

不久前我写了一篇关于自定义 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

自定义 jquery 个移动滑块标签

Custom jquery mobile slider labels

javascript

css

jquery

jquery-ui

jquery-mobile