title: jquery ui slider Styling
body: <p>I'm trying to style a value within a jquery ui range slider handle.</p>
  
  <p>I'm using this <a href="http://jsfiddle.net/6hyVP/2/" rel="nofollow">DEMO</a></p>
  
  <p>Plus I've used this CSS and it's still not working.  Where am I going wrong?</p>
  
  <pre><code>&lt;div class="demo"&gt;
      &lt;div id="slider-vertical" class="sliderControl-label v-labeCurrent"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .sliderControl-label {
      color: #CCCCCC;
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: -10px;
  }
  
  .ui-slider-handle .sliderControl-label .v-labelCurrent {
      color: #777777;
      font-size: 16px;
      line-height: 24px;
      position: relative;
      text-shadow: 0 1px 0 #FFFFFF;
      top: -2px;
      transition: color 0.15s linear 0s;
  }​
  
  
  $(function(){
      $("#slider-vertical").slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 100,
          value: 60,
          slide: function( event, ui ) {
              $( "#amount" ).val( ui.value );
              $(this).find('.ui-slider-handle').text(ui.value);
          },
          create: function(event, ui) {
              var v=$(this).slider('value');
              $(this).find('.ui-slider-handle .sliderControl-label .v-labelCurrent').text(v);
          }
      });    
  });​
  </code></pre>
  
  <p>I'm getting my self in a right CSS mess.</p>