How to create a scientific HTML slider with input type="range"

class ScientificInput extends HTMLDivElement {
  constructor() {
    super();
    this.step = "any";
    this.ticks = 11;
    this.canvasHeight = 24;
  }

  createSvgElement(elementName) {
    let element = document.createElementNS(
      "http://www.w3.org/2000/svg",
      elementName
    );
    return element;
  }

  createTickLines(x1, y1, x2, y2) {
    let tickColor = this.getAttribute("tColor");
    let newLine = this.createSvgElement("line");
    newLine.setAttribute("x1", x1);
    newLine.setAttribute("y1", y1);
    newLine.setAttribute("x2", x2);
    newLine.setAttribute("y2", y2);
    if (tickColor) {
      newLine.setAttribute("stroke", tickColor);
    } else {
      newLine.setAttribute("stroke", "black");
    }
    return newLine;
  }

  createTickNumbers(txt, x, y) {
    let numberColor = this.getAttribute("nColor");
    let newText = this.createSvgElement("text");
    newText.setAttribute("font-size", "12px");
    if (txt < 1 && txt !== 0) {
      txt = parseFloat(txt.toFixed(4));
      txt = txt.toExponential();
    }
    if (txt > 1000) {
      txt = txt.toExponential();
    }

    if (numberColor) {
      newText.setAttribute("fill", numberColor);
    }

    newText.textContent = txt;
    newText.setAttributeNS(null, "x", x);
    newText.setAttributeNS(null, "y", y);
    return newText;
  }

  drawTicks(svg) {
    this.textNodes = [];
    const step = (this.max - this.min) / 10;
    let currentWidth = parseFloat(
      getComputedStyle(this).width.replace("px", "")
    );
    const factor = (currentWidth - 16) / (this.max - this.min);
    for (let tick = 0; tick < 11; tick++) {
      const horizontalOffset = Math.ceil(tick * step * factor + 8);
      const line = this.createTickLines(
        horizontalOffset,
        0,
        horizontalOffset,
        5
      );
      svg.append(line);
      const text = this.createTickNumbers(
        tick * step + this.min,
        horizontalOffset,
        20
      );
      svg.append(text);
      this.textNodes.push(text);
    }
  }

  adjustTextPosition() {
    this.textNodes.forEach((e, i) => {
      const textWidth = Math.round(e.getBBox().width);
      if (i === 0) {
        e.setAttribute("transform", `translate(-${5} 0)`);
      } else if (i === 10) {
        e.setAttribute("transform", `translate(-${textWidth - 5} 0)`);
      } else {
        e.setAttribute("transform", `translate(-${textWidth / 2} 0)`);
      }
    });
  }

  createContainer() {
    const container = document.createElement("div");
    container.setAttribute("id", "container");
    container.style.width = "100%";
    container.style.display = "flex";
    container.style.flexFlow = "column";
    return container;
  }

  createSvg() {
    let svg = this.createSvgElement("svg");
    svg.setAttributeNS(
      "http://www.w3.org/2000/xmlns/",
      "xmlns:xlink",
      "http://www.w3.org/1999/xlink"
    );
    svg.setAttribute("width", "100%");
    svg.setAttribute("height", this.canvasHeight);
    return svg;
  }

  createRange() {
    const range = document.createElement("input");
    range.type = "range";
    range.min = this.min;
    range.max = this.max;
    range.step = this.step;
    range.style.margin = "0";
    range.style.width = "100%";
    range.addEventListener("change", (e) => console.log(e.target.value));
    return range;
  }

  render() {
    this.width = parseFloat(this.getAttribute("width"));
    this.min = parseFloat(this.getAttribute("min"));
    this.max = parseFloat(this.getAttribute("max"));

    this.style.width = this.width + "px";

    // create a container
    this.container = this.createContainer();

    // create and set input control
    const range = this.createRange();

    // create a svg
    this.svg = this.createSvg();

    // draw the ticks on the canvas
    this.drawTicks(this.svg);

    // append the input to container
    this.container.append(range);

    // append the svg to container
    this.container.append(this.svg);

    // append the container to this instance
    this.append(this.container);

    // center the numbers
    this.adjustTextPosition();

    new ResizeObserver(() => {
      this.svg.remove();
      this.svg = this.createSvg();
      this.drawTicks(this.svg);
      this.container.append(this.svg);
      this.adjustTextPosition();
    }).observe(this.container);
  }

  connectedCallback() {
    this.render();
  }
}

customElements.define("scientific-input", ScientificInput, {
  extends: "div"
});

body {
  font-family: sans-serif;
}

.s-input {
  margin-bottom: 2em;
}

input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #0375ff;
}

input[type="range"]::-moz-range-progress {
  background-color: #0375ff;
}

input[type="range"]::-moz-range-track {
  background-color: gray;
  border-radius: 5px;
}

<div class="s-input" is="scientific-input" min="0" max="10" width="300" tColor="forestGreen" nColor="hotPink"></div>
<div class="s-input" is="scientific-input" min="0" max="100" width="400" tColor="darkOrange" nColor="forestGreen"></div>
<div class="s-input" is="scientific-input" min="100" max="700" width="500"></div>
<div class="s-input" is="scientific-input" min="0" max="10000" width="500"></div>
<div class="s-input" is="scientific-input" min="0" max="0.007" width="500" ></div>