Read slider value and set it to an appended tag

Question

What I'm trying to do is to have a generic javascript that can handle multiple sliders. I'm adding a span tag that will hold the value of the slider to each slider. I then want to change the value of the span tag on change event.

My problem is to make it generic so it will only change the correct span tag. I've tried using event.target.siblings().attr(title) or any of the other attributes that contain the value such as aria-valuenow etc. But none of them show me the value in the span tag.

javascript:

$('.slider_cont a').append('<span class="tt">'+$('.slider_cont a').attr('title')+'</span>');
$('.slider_cont').live("change",function(event){
  $('.tt').html(event.target.siblings().attr('aria-valuenow'));
});

html:

<div id="ch1" class="slider_cont">
  <label for="slider-1" class="intensity_label">Intensity</label>
  <input type="range" name="slider-1" id="slider-1" data-mini="true" data-highlight="true" data-track-theme="d" data-theme="b" step="1" min="0" max="255" value="50">
</div>
<div id="ch2" class="slider_cont">
  <label for="slider-2" class="intensity_label">Lights On</label>
  <input type="range" name="slider-2" id="slider-2" data-mini="true" data-track-theme="d" data-theme="b" min="0" max="1440" value="15">
</div>

output from firebug:

   <div id="ch1_intensity" class="slider_cont">
<label id="slider-1-label" class="intensity_label ui-input-text ui-slider" for="slider-1">Intensity</label>
<input id="slider-1" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset ui-mini ui-slider-input" type="number" data-type="range" value="50" max="255" min="0" step="1" data-theme="b" data-track-theme="d" data-highlight="true" data-mini="true" name="slider-1">
<div class="ui-slider ui-btn-down-d ui-btn-corner-all ui-slider-mini" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 32.9412%;"></div>
<a class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" role="slider" aria-valuemin="0" aria-valuemax="255" aria-valuenow="84" aria-valuetext="84" title="84" aria-labelledby="slider-1-label" style="left: 32.9412%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="tt-intensity">50</span>
</a>
</div>
</div>
<div id="ch1_lights_on" class="slider_cont">
<label id="slider-2-label" class="intensity_label ui-input-text ui-slider" for="slider-2">Lights On</label>
<input id="slider-2" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset ui-mini ui-slider-input" type="number" data-type="range" value="15" max="1440" min="0" data-theme="b" data-track-theme="d" data-highlight="true" data-mini="true" name="slider-2">
<div class="ui-slider ui-btn-down-d ui-btn-corner-all ui-slider-mini" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 1.04167%;"></div>
<a class="ui-slider-handle ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" role="slider" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="15" aria-valuetext="15" title="15" aria-labelledby="slider-2-label" style="left: 1.04167%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="tt-intensity">50</span>
</a>
</div>
</div>