CSS

<style>
#c1 {
    color: #006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
width: 80px;
height: 80px;
  }
</style>

HTML

<div id='d1'>0</div> <div id="slider"></div>
<div id="c1">R</div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$(function() {
    $( "#slider" ).slider({

range: "max",
      min: 1,
      max: 255,

slide: function(event, ui) { 

//        alert(ui.value); 

var rc=ui.value;
$('#d1').html(ui.value);
$( "#c1" ).animate({ backgroundColor: "rgb( " + rc + ", 0,0 )"},1);

    } 

  });
  });
////////////////
})
</script>