Javascript 水平滑块上的标记_Javascript_Html_Css

Javascript 水平滑块上的标记

javascript html css

Javascript 水平滑块上的标记,javascript,html,css,Javascript,Html,Css,我正在尝试对齐水平滑块上的刻度线，该滑块的步长为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? 现在，我使用了一个标记表，因为我觉得这会将开

我正在尝试对齐水平滑块上的刻度线，该滑块的步长为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属性

width

更改滑块的长度，然后在该点使用表格上的边距来对齐两个滑块。如果您不想进行大量猜测，可以使用jquery通过jquery获得这些长度。为了方便起见，我将你的tic标记编辑成了一条水平线，并添加了一些其他css来进行适当的补偿

$（文档）.ready（函数（）{
$（'.slider'）.css（'width'，$（'table'）.css（'width'））；
$（'.measure'）.css（'margin-left'，$（'.steps'）.css（'width'））；
});
.checkpoint{
文本对齐：居中；
浮动：中心；
}
.滴答声{
文本对齐：右对齐；
边界：无；
宽度：41px；
高度：5px；
显示：内联块；
}
.价值{
文本对齐：居中；
左边框：1px；
字体大小：12px；
宽度：41px；
高度：5px；
显示：块下方；
}
.检查点：非（：最后一个子项）{
右边距：20px；
}
.风格{
左：56.5px；
位置：相对位置；
}

滑块
步骤：
|
5.
|
10
|
15
|
20
|
25
|
30
|
35
|
40
哪个文档执行“$（document）.ready（function（）{…}”脚本转到？我只有.html和.css文件。我不知道该插入到哪里。//抱歉，这是新的。它确保在jquery开始处理文档之前加载文档。您可以将其放入一个JavaScript文件，即.js，并通过脚本标记加载。脚本标记如下所示。您还需要加载jquery，您可以nload或使用公共发行版，如Google开发者页面上的发行版。如果你想使用jqueryYou也可以在你的开始和结束脚本标签中使用html脚本
/*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;
}