在自定义范围输入中显示刻度位置

时间：2015-11-13 18:51:20

标签： html css

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

但遗憾的是没有任何事情出现。我想要实现的是 以下（在MS Paint中创建的丑陋示例，但我想你会理解我的意思）：

Example image

那我怎么能实现呢？

3 个答案:

答案 0 :(得分：12)

我知道我的回答有点迟了，但当我试图找到同样的事情时，我会一直回到这里。我确实设法使用以下设置显示标记。

代码导致以下结果： Displaying range ticks for input range slider 

onDragStart(i) {
}


onDragOver(event) {
    console.log('1')
    event.preventDefault();
}

onDrop(event, i) {
}

* {
  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;
}

答案 1 :(得分：1)

-webkit-appearance: none;

The above删除了平台原生样式（Chrome / Safari），删除了刻度线。

您可以获得更多信息here，但不幸的是，对输入范围（特别是刻度）的样式支持仍然非常糟糕。

答案 2 :(得分：0)

document.querySelectorAll(".__range-step").forEach(function(ctrl) {
	var el = ctrl.querySelector('input');        
	var output = ctrl.querySelector('output'); 
	var newPoint, newPlace, offset;
	el.oninput =function(){ 
		// colorize step options
		ctrl.querySelectorAll("option").forEach(function(opt) {
			if(opt.value<=el.valueAsNumber)                
				opt.style.backgroundColor = '#48530d';
			else
				opt.style.backgroundColor = '#a4b162';
		});           
	};
	el.oninput();    
});
.__range input
{
  outline: none;
	-webkit-appearance: none;
	background-color: #aaa;
	height: 3px;
	width: 100%;
	margin: 10px auto;
}
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;
}

.__range-step{
	position: relative;                
}

.__range-max{
	float: right;
}
.__range-step datalist {
	position:relative;
	display: flex;
	justify-content: space-between;
	height: auto;
	bottom: 16px;
	/* disable text selection */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */                
	user-select: none; /* Standard */
	/* disable click events */
	pointer-events:none;  
}
.__range-step datalist option {
	width: 10px;
	height: 10px;
	min-height: 10px;
  padding:0;
  line-height: 40px;
}

.__range{
  margin:10px 40px;
}
<div class="__range">
      <input value="4" type="range" max="6" min="1" step="1" list="ticks1">
</div>

<div class="__range __range-step">
        <input value="4" type="range" max="6" min="1" step="1" list="ticks1">
        <datalist id="ticks1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </datalist>
</div>

相关问题
最新问题