解决双Range Slider交叉问题及选中区间样式优化需求

需求说明 #

• 两个滑块禁止交叉：第一个滑块的最大值等于第二个滑块当前值，第二个滑块的最小值等于第一个滑块当前值；
• 仅选中区间显示棕色，其余轨道区域为白色。

当前代码 #

CSS样式 #

.range_container {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.sliders-control {
  position: relative;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
 }

 input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 100%;
  position: absolute;
  background-color: brown;
  pointer-events: none;
  border-radius: 10px;
  border: 1px solid black;
}

.values{
  background-color: #3264fe;
  width: 32%;
  position: relative;
  margin: auto;
  padding: 10px 0;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
  font-size: 25px;
  color: #ffffff;
}
.values:before{
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-top: 15px solid #3264fe;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   margin: auto;
   bottom: -14px;
   left: 0;
   right: 0;
}

#fromSlider {
  height: 0;
  z-index: 1;
  top: 5px;
  background: none;
  border: none;
}

#min-value {
  float: left;
}

#max-value {
  float: right;
}

HTML模板 #

<span id="min-value">&#x20b9;{{value1}}</span> <span id="max-value">&#x20b9;{{value2}}</span>
<div class="range_container">
  <div class="sliders-control">
    <input id="fromSlider" type="range" step="500" [(ngModel)] = "value1" value="{{value1}}" min="7000" max="100000" />
    <input id="toSlider" type="range" step="500" [(ngModel)] = "value2" value="{{value2}}" min="7000" max="100000" />
  </div>
</div>

效果对比 #

当前效果 #

期望效果 #

修复方案 #

1. 禁止滑块交叉 #

在Angular组件的.ts文件中添加值变化监听逻辑，动态限制两个滑块的范围：

value1 = 7000;
value2 = 100000;

updateSliderLimits() {
  // 交换值确保左滑块始终小于等于右滑块
  if (this.value1 > this.value2) {
    [this.value1, this.value2] = [this.value2, this.value1];
  }
  // 更新滑块的max/min属性
  const fromSlider = document.getElementById('fromSlider') as HTMLInputElement;
  const toSlider = document.getElementById('toSlider') as HTMLInputElement;
  if (fromSlider && toSlider) {
    fromSlider.max = this.value2.toString();
    toSlider.min = this.value1.toString();
  }
  // 更新CSS变量用于区间颜色计算
  document.documentElement.style.setProperty('--min-value', this.value1.toString());
  document.documentElement.style.setProperty('--max-value', this.value2.toString());
}

ngOnInit() {
  this.updateSliderLimits();
}

同时修改HTML模板，添加值变化触发事件：

<input id="fromSlider" type="range" step="500" [(ngModel)]="value1" (ngModelChange)="updateSliderLimits()" min="7000" [max]="value2" />
<input id="toSlider" type="range" step="500" [(ngModel)]="value2" (ngModelChange)="updateSliderLimits()" [min]="value1" max="100000" />

2. 实现区间棕色样式 #

修改CSS，用底层白色轨道+动态计算的中间棕色区间实现效果：

.sliders-control {
  position: relative;
  height: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid black;
  overflow: hidden;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none;
  background: transparent;
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
  margin-top: -3px; /* 调整滑块垂直居中 */
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  pointer-events: all;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px gray;
  cursor: pointer;
}

/* 动态生成中间棕色区间 */
.sliders-control::after {
  content: '';
  position: absolute;
  height: 100%;
  left: calc(((var(--min-value) - 7000) / (100000 - 7000)) * 100%);
  right: calc(((100000 - var(--max-value)) / (100000 - 7000)) * 100%);
  background-color: brown;
  border-radius: 10px;
}

内容的提问来源于stack exchange，提问作者Vaibhav More