title: how to get value from this slider and how to make a new same slider?
body: <p>here is the code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;jQuery UI Slider &lt;/title&gt;
  &lt;link href="../style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt; 
          &lt;style type="text/css"&gt; 
  #container{
  background:url(bg.jpg)!important;
  padding:100px 50px 0px 50px;
  }
  
  /*the slider background*/
  .slider {
  width:230px;
  height:11px;
  background:url(slider-bg.png);
  position:relative;
  margin:0;
  padding:0 10px;
  }
  
  /*Style for the slider button*/
  .ui-slider-handle {
  width:24px;
  height:24px;
  position:absolute;
  top:-7px;
  margin-left:-12px;
  z-index:200;
  
  }
  
  /*Result div where the slider value is displayed*/
  #slider-result {
  font-size:20px;
  height:200px;
  font-family:Arial, Helvetica, sans-serif;
  color:#fff;
  width:250px;
  text-align:center;
  text-shadow:0 1px 1px #000;
  font-weight:700;
  padding:20px 0;
  }
  
  /*This is the fill bar colour*/
  .ui-widget-header {
  background:url(fill.png) no-repeat left;
  height:8px;
  left:1px;
  top:1px;
  position:absolute;
  }
  
  a {
  outline:none;
  -moz-outline-style:none;
  }
  
  
          &lt;/style&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
          &lt;div class="slider"&gt;&lt;/div&gt; 
  
          &lt;div class="slider1"&gt;&lt;/div&gt; 
  
          &lt;div class="slider2"&gt;&lt;/div&gt; 
  
          &lt;div id="slider-result" value="poor"&gt;Poor&lt;/div&gt;   
          &lt;div id="slider-result1" value="poor"&gt;Poor&lt;/div&gt;   
          &lt;input type="hidden" value="poor" id="hidden"/&gt;
          &lt;input type="hidden1" value="poor" id="hidden"/&gt;
  
             &lt;script&gt; 
  
                   $( ".slider" ).slider({
                  animate: true,
                  range: "min",
                  value: 0,
                  min: 0,
                  max: 4,
                  step: 1,
  
                  //this gets a live reading of the value and prints it on the page
                  slide: function( event, ui ) {
                  if(ui.value ==0)
                      $( "#slider-result" ).html( "Poor");
                      else if(ui.value == 1)
                      $( "#slider-result" ).html( "Average");
                      else if(ui.value == 2)
                      $( "#slider-result" ).html( "Good");
                      else if(ui.value == 3)
                      $( "#slider-result" ).html( " Very Good");
                      else if(ui.value == 4)
                      $( "#slider-result" ).html( "Excellent");
  
                  },
  
                  //this updates the hidden form field so we can submit the data using a form
                  change: function(event, ui) { 
                  $('#hidden').attr('value', ui.value);
  
                  }
  
                  });
  
  
          &lt;/script&gt; 
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How to get the value of selected slider? Since it is hidden when i get the value using
  <code>var currentValue = $('#hidden').val();</code>, I get an object as return value. i could not get that value... any help and also want to make a new same slider in     <code>&lt;div class="slider1"&gt;&lt;/div&gt;</code>  to make it? </p>
  
  <p>Any idea?</p>