Search code examples
jquery-uijquery-ui-slider

Issue on Setting UI Slider For Opacity Amount

Can you please take a look at this jsfiddle and let me know how I can use the slider to get values from 0 to 1 like 0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1

Here is what I have 

$(function() {
    $( "#slider" ).slider({
      value:1,
      min: 0,
      max: 1,
      step: 10,
      slide: function( event, ui ) {
        $( "#opacity" ).val( ui.value );
      }
    });
    $( "#opacity" ).val( $( "#slider" ).slider( "value" ) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<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>

Solution

  • Your step value is too high, try:

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

    jsfiddle demo

    New fiddle demo