Как отобразить многоцветие на слайдере с помощью d3-simple-slider.js

Я использую слайдер d3-simple и хочу, чтобы на слайдере отображалось многоцветие, т.е.

В диапазоне 0–9 он должен быть синим, а от 9 до 26 — оранжевым, а для диапазона 26–60 цвет должен быть красным. Если я переместил ручку, которая в настоящее время указывает на 26, затем сдвину ее влево, за ней должен последовать красный цвет, аналогично для Другая ручка тоже. Может кто-нибудь помочь в этом вопросе?

 const rangeSvg = d3.select('figure#rangeContainer')
      .append('svg')
      .attr('width', 350) 
      .attr('height', height);

    const segmentWidth = 90; 

    // Create the first slider
    const rangeSlider = rangeSvg.append('g')
      .attr('transform', 'translate(10,30)'); // Position the first slider

    // Call your slider function to draw the first slider
    rangeSlider.call(sliderHorizontal()

      .min(1)
      .max(60)
      .step(1)
      .default([6,36])
      .tickValues([1, 6, 36, 60])
      .width(segmentWidth * 3)
      .handle(d3.symbol().type(d3.symbolCircle).size(100)())
      .fill('orange') // Apply the gradient here
      .on('onchange', selectedPeriod => {
       let fileAgingPeriod = selectedPeriod.map(Math.round);
        this.activeValue = fileAgingPeriod[0];
        this.obsoleteValue = tfileAgingPeriod[1];
        this.cdr.detectChanges(); 
      })
    );

    rangeSlider.select('.track-inset')
      .attr('stroke', '#54A7FF');
    //  .attr('stroke-dasharray',230);

    rangeSlider.selectAll('.handle')
      .attr('fill', '#54A7FF');