title: Placing text inside range slider
body: <p>I am new to CSS and have a question that is probably simple to answer, though I am not sure which class to start with.</p>
  
  <p>My objective is to put text that fit neatly inside of range slider
  I am using public range slider example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let app = (() =&gt; {
  
    function updateSlider(element) {
      if (element) {
        let parent = element.parentElement,
        lastValue = parent.getAttribute('data-slider-value');
  
        if (lastValue === element.value) {
          return; // No value change, no need to update then
        }
  
        parent.setAttribute('data-slider-value', element.value);
        let $thumb = parent.querySelector('.range-slider__thumb'),
        $bar = parent.querySelector('.range-slider__bar'),
        pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
  
        $thumb.style.bottom = `${pct}%`;
        $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
        $thumb.textContent = `${element.value}%`;
      }
    }
    return {
      updateSlider: updateSlider };
  
  
  })();
  
  (function initAndSetupTheSliders() {
    const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
    inputs.forEach(input =&gt; input.setAttribute('value', '50'));
    inputs.forEach(input =&gt; app.updateSlider(input));
    // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
    inputs.forEach(input =&gt; input.addEventListener('input', element =&gt; app.updateSlider(input)));
    inputs.forEach(input =&gt; input.addEventListener('change', element =&gt; app.updateSlider(input)));
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.range-slider {
    
    position: relative;
    text-align: center;
    height: 300px;
    max-height: 100%;
    margin-top: 15%;
    /*margin-bottom: 5vh;*/
  }
  /*.range-slider:before {
    position: absolute;
    top: -2em;
    //left: .5em;
    content: attr(data-slider-value) "%";
    color: red;
    font-size: 25px;
  }*/
  .range-slider__thumb {
    position: absolute;
    left: 32%;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    background: white;
    color: black;
    background: url('../../../assets/images/button_round_dark.png');
    font-size: 80%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index:999;
    
    // position: absolute;
    // left: 42%;
    // width: 30px;
    // height: 30px;
    // line-height: 30px;
    // background: white;
    // color: black;
    // font-size: 50%;
    // font-size: 80%;
    // box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
    // border-radius: 50%;
    // pointer-events: none;
    // z-index:999;
  }
  .range-slider__thumb_start{
      position: absolute;
      left: 33%;
      width: 45px;
      height: 45px;
      line-height: 30px;
      background: white;
      color: black;
      background: url('../../../assets/images/button_round_dark.png');
      font-size: 60%;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
      border-radius: 50%;
      pointer-events: none;
      z-index:99;
      bottom: 0px;
  }
  .range-slider__bar {
    left: 42%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
    pointer-events: none;
    width: 20px;
    border-radius: 10px;
  }
  .range-slider input[type=range][orient=vertical] {
    position: relative;
    margin: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
  }
  .range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  .range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
    border: none;
    background: orangered;
    width: 18px;
    border-color: #B94F1B;
    border-radius: 10px;
    //box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
    
    //-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
    //-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
    box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
    
  }
  .range-slider input[type=range][orient=vertical]::-moz-range-track {
    border: none;
    background: white;
    width: 18px;
    border-color: #343440;
    border-radius: 10px;
    //box-shadow: 0 0 0 2px #3D3D4A;
  }
  .range-slider input[type=range][orient=vertical]::-ms-track {
    border: none;
    background: white;
    width: 18px;
    border-color: #343440;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #3D3D4A;
    color: transparent;
    height: 100%;
  }
  .range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
    display: none;
  }
  .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    opacity: 0;
  }
  .range-slider input[type=range][orient=vertical]::-moz-range-thumb {
    width: 30px;
    height: 30px;
    opacity: 0;
  }
  .range-slider input[type=range][orient=vertical]::-ms-thumb {
    width: 30px;
    height: 30px;
    opacity: 0;
  }
  
  .range-slider-text{
  
    font-size: 1rem;
    color: red;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -30px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="range-slider" id="range_slider"&gt;
      &lt;input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" /&gt;
      &lt;div class="range-slider__bar"&gt;&lt;/div&gt;
      &lt;div class="range-slider-text"&gt;Header Two&lt;/div&gt;
      &lt;div class="range-slider__thumb"&gt;&lt;/div&gt;
      
      &lt;div class="bubble" id="me" style="display: none"&gt;slide to provide your feedback&lt;/div&gt;
      &lt;!-- &lt;div class="range-slider__thumb_start"&gt;&lt;/div&gt; --&gt;
  
      &lt;div class="range-slider__line"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  I am new to CSS and have a question that is probably simple to answer, though I am not sure which class to start with.</p>
  
  <p>My objective is to put text that fit neatly inside of range slider
  I am using public range slider example:
  Like 
  <a href="https://i.stack.imgur.com/B801Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B801Q.png" alt="enter image description here"></a></p>