Bootstrap 4 + Angular 8实现带临界高亮区间的滑块求助

I’ve run into similar Bootstrap 4 compatibility snags with that slider library too—let’s build a custom component instead that supports dynamic red highlight ranges at both ends, no external library headaches.

Step 1: Generate the Angular Component #

First, spin up a new component in your Angular 8 project:

ng generate component range-slider-with-highlights

Step 2: Component Template (range-slider-with-highlights.component.html) #

We’ll use a native range input styled with Bootstrap, plus two overlay divs for the red highlight zones. The magic here is binding dynamic styles based on your critical values:

<div class="slider-container position-relative">
  <!-- Bootstrap-styled range input -->
  <input 
    type="range" 
    class="custom-range"
    [min]="minValue"
    [max]="maxValue"
    [(ngModel)]="currentValue"
    (input)="onSliderChange()"
  >
  
  <!-- Left red highlight zone (below min critical value) -->
  <div 
    class="highlight-zone left-zone"
    [style.width.%]="leftHighlightWidth"
  ></div>
  
  <!-- Right red highlight zone (above max critical value) -->
  <div 
    class="highlight-zone right-zone"
    [style.left.%]="100 - rightHighlightWidth"
    [style.width.%]="rightHighlightWidth"
  ></div>
</div>

Step 3: Component Logic (range-slider-with-highlights.component.ts) #

Add input properties for your dynamic critical values, and calculate the percentage widths for the highlight zones automatically:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-range-slider-with-highlights',
  templateUrl: './range-slider-with-highlights.component.html',
  styleUrls: ['./range-slider-with-highlights.component.css']
})
export class RangeSliderWithHighlightsComponent implements OnInit {
  @Input() minValue = 0;
  @Input() maxValue = 100;
  @Input() lowerCriticalValue = 20; // Your dynamic left threshold
  @Input() upperCriticalValue = 80; // Your dynamic right threshold
  @Input() currentValue = 50;

  leftHighlightWidth = 0;
  rightHighlightWidth = 0;

  ngOnInit(): void {
    this.calculateHighlightWidths();
  }

  onSliderChange(): void {
    // Optional: Add logic to react to slider value changes
  }

  private calculateHighlightWidths(): void {
    // Convert left critical value to percentage of total slider range
    this.leftHighlightWidth = ((this.lowerCriticalValue - this.minValue) / (this.maxValue - this.minValue)) * 100;
    
    // Convert right critical value to percentage of total slider range
    this.rightHighlightWidth = ((this.maxValue - this.upperCriticalValue) / (this.maxValue - this.minValue)) * 100;
  }
}

Step 4: Component Styles (range-slider-with-highlights.component.css) #

Style the highlight zones to sit behind the Bootstrap slider track, matching its look and feel:

.slider-container {
  height: 2rem; /* Match Bootstrap's custom-range height */
}

.highlight-zone {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px; /* Match Bootstrap's track height */
  border-radius: 3px;
  background-color: #dc3545; /* Bootstrap danger red */
  z-index: 1; /* Ensure it sits behind the slider track and thumb */
}

/* Keep Bootstrap's slider track and thumb above the highlights */
.custom-range {
  z-index: 2;
  position: relative;
}

Step 5: Use the Component in Your App #

Drop this component anywhere in your templates, passing in your dynamic critical values:

<app-range-slider-with-highlights
  [minValue]="0"
  [maxValue]="100"
  [lowerCriticalValue]="15" <!-- Update this dynamically as needed -->
  [upperCriticalValue]="85" <!-- Update this dynamically as needed -->
  [(currentValue)]="selectedValue"
></app-range-slider-with-highlights>

Key Notes #

• This uses native HTML + Bootstrap 4 styles, so no compatibility conflicts.
• The highlight widths auto-adjust whenever your critical values change—no hardcoded CSS needed.
• If you need a dual-handle range slider (like the example you referenced), you can extend this component by adding a second input or custom handles; the highlight calculation logic stays the same.

内容的提问来源于stack exchange，提问作者Matthias Neubert