Маркеры на горизонтальном слайдере

Я пытаюсь выровнять отметки на горизонтальном слайдере, который работает на 5 единиц. У меня есть два вопроса:Маркеры на горизонтальном слайдере

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?

Прямо сейчас, я использовал таблицу для маркеров, потому что я чувствовал, что будет толкать начальный маркер к началу слайдера линии - не получить желаемый результат.

Вот мой 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>

Вот мой .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; 
}

Мой выход дает мне это:

источник

2015-11-26 i_use_the_internet

что вы могли бы сделать, это использовать свойство CSS width, чтобы изменить длину ползунка, в этот момент вы можете использовать поле на столе, чтобы выровнять два. если вы не хотите делать много догадок, вы можете использовать jquery для получения этих длин с помощью jquery. чтобы сделать его проще ив отредактировав делениями быть горизонтальной линии и добавил некоторые другие CSS, чтобы надлежащим образом компенсировать

$(document).ready(function(){ 
 
\t $('.slider').css('width',$('table').css('width')); 
 
\t $('.measure').css('margin-left',$('.steps').css('width')); 
 
\t });

.checkpoint { 
 
\t text-align: center; 
 
\t float: center; 
 
\t } 
 
\t .tick { 
 
\t text-align:right; 
 
\t border:none; 
 
\t width: 41px; 
 
\t height: 5px; 
 
\t display: inline-block; 
 
\t } 
 
\t .value { 
 
\t text-align:center; 
 
\t \t border-left: 1px; 
 
\t \t font-size: 12px; 
 
\t \t width: 41px; 
 
\t \t height: 5px; 
 
\t \t display: below-block; 
 
\t } 
 
\t .checkpoint:not(:last-child) { 
 
\t margin-right: 20px; 
 
\t } 
 

 
\t .style { 
 
\t \t left: 56.5px; 
 
\t \t position: relative; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
\t <head> 
 
\t \t <title>Slider</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <form action="action_page.php" method="get"> 
 
\t \t \t <span class='steps'>Steps:</span> 
 
\t \t \t <input class='slider' type="range" name="points" min="0" max="40" step="5"> 
 
\t \t \t <input type="submit"> 
 
\t \t </form> 
 
\t \t <table class='measure'> 
 
\t \t \t <td> 
 
\t \t \t \t <table> 
 

 
\t \t \t \t \t <td> 
 
\t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">5</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">10</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">15</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">20</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">25</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">30</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">35</div> 
 
\t \t \t \t \t </td> 
 

 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">40</div> 
 
\t \t \t \t </td> 
 

 
\t \t </table> 
 

 
\t </td> 
 

 
\t \t </table> 
 

 
\t </body> 
 
\t </html>

источник

2015-11-26 02:00:24 Binvention

, какой документ означает «$ (документ) .ready (функция() { ...} «script go to?» У меня есть только файлы .html и .css. Я не уверен, где их вставить. // Извините, новичок в этом –

Он уверен, что документ загружен, прежде чем jquery начнет возиться с его вы поместили бы в файл JavaScript, который является .js, и он загружается через тег скрипта. – Binvention

. Теги скрипта выглядят следующим образом: – Binvention

Маркеры на горизонтальном слайдере

ответ

Смежные вопросы