title: Placing a value inside the thumb of a range input
body: <p><strong>UPDATE:</strong>  solution below.</p>
  
  <p>I have a slider ( <code>&lt;input type='range'../&gt;</code> ) and I have a value inside the thumb.
  Here's a crude representation:</p>
  
  <pre><code>        ______
  _______/      \______
  |______: [42] :______|
         \______/
  </code></pre>
  
  <p>Problem is the thumb doesn't support content so I'm placing the value in a <code>&lt;div&gt;&lt;span class='noselect'&gt;[42]&lt;/span&gt;&lt;/div&gt;</code> and calculate some <code>left: ?px</code> with javascript to move the div to match over the thumb.</p>
  
  <p>This whole work-around works reasonably well... except the text captures events that are intended for the thumb, so the slider doesn't move and the text is being selected instead.</p>
  
  <p>I've added css to prevent the actual text selection:</p>
  
  <pre><code>.noselect {
      -moz-user-select:-moz-none;
      -moz-user-select:none;
      -o-user-select:none;
      -khtml-user-select:none;  
      -webkit-user-select:none; 
      -ms-user-select:none;
      user-select:none; 
      display: block;
  }
  </code></pre>
  
  <p>but the above CSS doesn't prevent the mouse event to be consumed by the text instead of the thumb.</p>
  
  <p>On top of that I made an attempt to transfer the event to the thumb:</p>
  
  <pre><code>$(document).on('click touchstart touchend touchmove', '.noselect', function (event) {
      var slider = $(this).parents('.slider').first();
      if (slider &amp;&amp; slider.length &gt; 0) {
          slider.trigger(event.type, event);
          event.stopPropagation();
          return false;
      } 
  });
  </code></pre>
  
  <p>The above js captures the text event but trying to trigger it on the slider under it doesn't do anything.</p>
  
  <p><strong>Question is:</strong> how do I make that value happen and not interfere with the user interaction?</p>
  
  <p>The thumb itself is styled like a circle:</p>
  
  <pre><code>input[type="range"]:disabled::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-color: #404040;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      background-color: #404040; 
      border: none; 
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I resolved the issue based on the accepted answer below. Here's what the CSS looks like:</p>
  
  <p>the CSS below makes the slider and thumb of the appearance I needed, except note the "opacity" attribute is set to (near) 0:</p>
  
  <pre><code>input[type=range] {
      -webkit-appearance: none;
      background-color: silver;
      opacity: 0.0;
      stroke-opacity: 0.0;
      height: 26px; 
      border-radius: 0px;
  }
  
  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-color: #808080;
      width: 54px;
      height: 54px;
      opacity: 0.02;
      stroke-opacity: 1.0;
      border-radius: 26px;
      background-color: #F0F0F0; 
      border: none;
  }
  </code></pre>
  
  <p>The I copied these styles under different names (sliderBackground, sliderThumb) and applied them to -s placed before the :</p>
  
  
     
     42