在自定义范围输入中显示刻度位置 [英] Show tick positions in custom range input

问题描述

请查看以下 CodePen .在那里，您可以看到我的自定义范围输入.我希望显示滑块的刻度位置，为此，我添加了数据列表:

Please take a look at the following CodePen. There you can see my custom range input. I want the tick positions of the slider to be shown and for that I added the datalist:

fieldset {
    border: 2px solid #48530D;
    padding-top: 27px;
        padding-right: 20px;
        padding-bottom: 0px;
        padding-left: 20px;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 4px 0;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: #a4b162;
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0);
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 1px solid #000000;
    height: 16px;
    width: 16px;
    border-radius: 0px;
    background: #48530d;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #a6b365;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: #a4b162;
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0);
}

input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 1px solid #000000;
    height: 16px;
    width: 16px;
    border-radius: 0px;
    background: #48530d;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #a2af5f;
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 0px;
     box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type=range]::-ms-fill-upper {
    background: #a4b162;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 1px solid #000000;
    height: 16px;
    width: 16px;
    border-radius: 0px;
    background: #48530d;
    cursor: pointer;
    height: 8px;
}

input[type=range]:focus::-ms-fill-lower {
    background: #a4b162;
}

input[type=range]:focus::-ms-fill-upper {
    background: #a6b365;
}

<fieldset>
    <form>
        <input max="6" min="1" step="1" name="question_three" type="range" list="question_three_list" />
        <datalist id="question_three_list">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </datalist>
    </form>
</fieldset>

但不幸的是，什么都没有出现.我想要实现的是 以下(在MS Paint中创建的丑陋示例，但我想您会明白我的意思):

But unfortunately nothing is showing up. What I wanted to achieve is the following (ugly example created in MS Paint, but I guess you will get what I mean):

那我该如何实现呢?

推荐答案

我知道我的答案已经很晚了，但是当我尝试做同样的事情时，我总是回到这里.我确实使用以下设置显示了刻度线.

I know my answer is way way late, but I keep coming back here when I try to find doing the same thing. I did manage to display tickmarks using the following settings.

代码产生以下结果:

The code results in the following:

* {
  box-sizing: border-box;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #D3D3D3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #FF0000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #FF0000;
  cursor: pointer;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: #D3D3D3;
  height: 10px;
  line-height: 40px;
  margin: 0 0 20px 0;
}

<div class="range">
  <input type="range" min="0" max="5" value="2" class="slider">
  <div class="sliderticks">
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div>
</div>

这篇关于在自定义范围输入中显示刻度位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！