UI Slider For Opacity Amount

by Akram kamal

HTML

0,
0.1,
0.2,
0.3,
0.4,
0.5,
0.6,
0.7,
0.8,
0.9,
1

<p>
  <label for="amount">Opacity:</label>
  <input type="text" id="opacity" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider"></div>

JavaScript

$(function() {
    $( "#slider" ).slider({
      value:1,
      min: 0,
      max: 1,
      step: .10,
      slide: function( event, ui ) {
        $( "#opacity" ).val( ui.value );
      }
    });
    $( "#opacity" ).val( $( "#slider" ).slider( "value" ) );
  });