Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these labels to scale alongside the jQuery slider as the page size changes. Currently, I can attach labels sans ticks, but it only suits one screen dimension.
$( ".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>Experimented with using CSS % for padding without expected results. Explored suggestions from jQuery UI Slider Labels Under Slider, Add tick marks to jQuery slider?, and Set font on custom span jQuery Mobile slider labels but aligning ticks and labels with the slider remains elusive. Seemingly a simple formatting issue, yet consolidating all components proves challenging. Any assistance is highly appreciated.
Edit
Further research led me to this blog: https://css-tricks.com/equidistant-objects-with-css/. Following their advice utilizing flex styling in my labels class with
<div class="labels" style="display: flex; justify-content: space-between;">