basic_2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:1%;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      font-family: monospace;
    }
    svg {
      border: 1px solid pink;
      margin: 0px;
      background: lightblue;
      border: 1px dashed cornflowerblue;
      height: 90%;
      width: 96%;
    }
    div {

}

#cardContainer {
      border: 1px solid blue;
      color: blue;
      display: flex;
      flex-direction: column;
      margin: 2%;
      font-size: 20px;
      padding: 2px;
      background: lightgray;
      max-width: 70%;
      max-height: 100%;
      width: 100%;
      padding-right: 55px;
      padding-left: 5px;
      margin-right: auto;
      margin-left: auto;
    }
    .sliderContainer {
      font-size: 10px;
      display: inline-flex;
      flex-direction: row;
    }
    .compType {
      border: 1px dotted red;
      margin-bottom: 1%;
      color: red;
      width: 100%;
      background: pink;
      padding: 2%;
    }
    .compSlider {
      border: 1px dotted purple;
      margin-bottom: 1%;
      color: red;
      width: 90%;
      background: lavender;
      padding: 4%;
    }
     .svgText {
      background: none;
      padding: 0px;
      font-size: 26px;
      font-family: monospace;
    }
    .axis {
     padding: 0px;
     font-size: 26px;
     font-family: monospace;
   }
  </style>
</head>

<body>
  <div class="control-group">
    <button onclick="renderLinear(d3.axisBottom, min, max)">
        render linear scale range
    </button>
    <button onclick="renderPow(d3.axisBottom, min, max)">
        render power scale range
    </button>
  </div>

<div id="cardContainer">cardContainer</div>

holder.append("div")
      .attr("class", "compSlider")

let slider = holder.selectAll(".compSlider")

// ****** create range slider ******

let min = 0,
  max = 100;

let height = 200,
    width = 500,
    margin = 70,
    offset = 40,
    axisWidth = width - 2 * margin;

let svg = slider.append("svg")

svg.append("g")
    	.attr("class", "svgText")
	    .append("text")
      .text("svg holder")
      .attr("y", 30)
      .attr("x", 150)

function createSvg(){
    // holder.append("div")
    //     .attr("class", "compSlider")

svg = slider.append("svg")

svg.append("g")
      .attr("class", "svgText")
      .append("text")
       .text("svg holder")
       .attr("y", 30)
       .attr("x", 20)
    .append("g")
        .attr("class", "axis")
        .attr("width", width)
        .attr("height", height);

}

slider.append("input")
    .attr("id", "baseDriverMin")
    .attr("type", "number")

slider.append("div")
    .attr("class", "sliderContainer")
    .text("svg slider container")

slider.append("input")
    .attr("id", "baseDriverMax")
    .attr("type", "number")
  
function renderAxis(fn, scale, i){
    var axis = fn()
        .scale(scale)
        .ticks(5);

svg.append("g")
        .attr("transform", function(){
                return "translate(" + offset + ", " +
                                          margin + ")";
        })
        .call(axis);
}

function renderLinear(fn, min, max){
    if(svg) svg.remove();

createSvg();

renderAxis(fn, d3.scaleLinear()
                .domain([min, max])
                .range([0, axisWidth]), 1);
}
function renderPow(fn, min, max){
    if(svg) svg.remove();

createSvg();

renderAxis(fn, d3.scalePow()
                .exponent(2)
                .domain([min, max])
                .range([0, axisWidth]), 2);
}

</script>
</body>

https://d3js.org/d3.v4.min.js