Markers on Horizontal Slider
Question
I am trying to align tick marks on a horizontal slider that steps by 5 units. I have two issues:
1 - How do I make the slider longer to accommodate the tick marks?
2 - How do I properly align these tick marks directly under the slider, each representing each 5units point on the slider?
Right now, I used a table for the markers because I felt that would push the start marker to the beginning of the slider line - not getting desired output.
Here is my HTML:
<!-- Slider.html-->
<html>
<link rel="stylesheet" type="text/css" href="slider.css">
<head>
<title>Slider</title>
</head>
<body>
<form action="action_page.php" method="get">
Steps:
<input type="range" name="points" min="0" max="40" step="5">
<input type="submit">
</form>
<table>
<td>
<table>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">5</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">10</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">15</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">20</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">25</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">30</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">35</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">40</div>
</td>
</table>
</td>
</table>
</body>
</html>
Here is my .css:
/*slider.css*/
.checkpoint {
text-align: center;
float: center;
}
.tick {
border-left: 1px solid #454545;
width: 41px;
height: 5px;
display: inline-block;
}
.value {
border-left: 1px;
font-size: 12px;
width: 41px;
height: 5px;
display: below-block;
}
.checkpoint:not(:last-child) {
margin-right: 20px;
}
.style {
left: 56.5px;
position: relative;
}
My output gives me this:
1 answers
solution1
1 ACCPTED 2015-11-26 02:00:24
what you could do is use the css property width to change the length of the slider at which point you could then use the margin on the table in order to align the two. if you don't want to have to do a lot of guessing you could use jquery to get those lengths using jquery. to make it easier ive edited your tic marks to be a horizontal line and added some other css to appropriately compensate
$(document).ready(function(){ $('.slider').css('width',$('table').css('width')); $('.measure').css('margin-left',$('.steps').css('width')); });
.checkpoint { text-align: center; float: center; } .tick { text-align:right; border:none; width: 41px; height: 5px; display: inline-block; } .value { text-align:center; border-left: 1px; font-size: 12px; width: 41px; height: 5px; display: below-block; } .checkpoint:not(:last-child) { margin-right: 20px; } .style { left: 56.5px; position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Slider</title> </head> <body> <form action="action_page.php" method="get"> <span class='steps'>Steps:</span> <input class='slider' type="range" name="points" min="0" max="40" step="5"> <input type="submit"> </form> <table class='measure'> <td> <table> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">5</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">10</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">15</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">20</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">25</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">30</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">35</div> </td> <td> <div class="checkpoint"> <div class="tick">|</div> <div class="value">40</div> </td> </table> </td> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.