时间戳

首页 > 解决方案 > 如何在自定义范围滑块中显示分区？

javascript - 如何在自定义范围滑块中显示分区？

问题描述

我正在为我的网站开发自定义范围滑块，我将 [input type="range"] 包裹在标签周围并将 input[type="range"] 的不透明度设置为零。一切正常，但我坚持显示分裂。附件是源代码，我在哪里分享了我迄今为止取得的成就和剩下的内容，为了方便起见，我将范围输入的不透明度设置为 0.1，这样你就可以了解后端的情况。任何建议或帮助将不胜感激。谢谢！

var rangeSlider = document.querySelector('#price_slider');
rangeSlider.addEventListener("input", rangeScript);

function rangeScript(value) {
  var target = document.getElementById('progress');

  let newValue = parseInt(this.value);

  switch (newValue) {
    case 4:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 0%,#f5f5f5 0% )';
      break;
    case 5:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 20%,#f5f5f5 0% )';
      break;
    case 6:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 40%,#f5f5f5 0% )';
      break;
    case 7:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 60%,#f5f5f5 0% )';
      break;
    case 8:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 80%,#f5f5f5 0% )';
      break;
    case 9:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 100%,#f5f5f5 0% )';
      break;
    default:
      target.style.background = 'linear-gradient(  90deg, rgba(166, 152, 62, 1) 0%,#f5f5f5 0% )';
  }
}
<h1>what I have achieved</h1>
<div id="progress" style=" width: 100%; background: linear-gradient( 90deg, rgba(166, 152, 62, 1) 5%, #f5f5f5 0% ); ">
  <input id="price_slider" type="range" min="4" max="9" value="" style="opacity: 0.1; width: 100%; height: 50px" />
</div>
<h2> what I want to achieve </h2>
<a href="https://imgbb.com/">
  <img src="https://i.ibb.co/T81PXkn/slider.png" alt="slider" border="0"></a>

标签： javascripthtmlcss

解决方案

您需要创建自定义范围“组件”，下面是一个简单的示例，但是您必须对其进行一些处理；）

const rangeSlider = document.querySelector('#price_slider');
rangeSlider.addEventListener("input", rangeScript);
const customProgress = document.querySelector('#customProgress');

for(let i = 0; i < rangeSlider.max - rangeSlider.min ; i++){
  const step = document.createElement('div');
  step.classList.add('step');
  step.setAttribute('data-label', +rangeSlider.min + i + 1);
  customProgress.appendChild(step);
}

customProgress.querySelector(`.step[data-label="${rangeSlider.value}"]`)
.classList.add('current')

function rangeScript(value){ 
  const target = document.getElementById('progress'); 
  
  let newValue = parseInt(this.value);
  const currentStep = customProgress.querySelector(`.step.current`);
  if (currentStep) {
    currentStep.classList.remove('current');
  }
  

nextStep = customProgress.querySelector(`.step[data-label="${newValue}"]`);

if (nextStep) {
  nextStep.classList.add('current')

}

}
#customProgress {
display: flex;
width: 100%;
height: 25px;
background: red;
}

.step {
  position: relative;
  background: yellow;
  height: 100%;
  width: 100%;
  border-right: 1px solid black;
}

.step::after {
  content: attr(data-label);
  position: absolute;
  top: -1em;
  right: -.25em;
}

.step ~ .current,
.step.current {
  background: blue;
}
<h1>what I have achieved</h1>
<div id="customProgress">
  
</div> 
<div id="progress" style=" width: 100%;" > 
<input id="price_slider" type="range" min="4" max="9" value="" style="opacity: 0.1; width: 100%; height: 50px" /> 
</div>

推荐阅读