Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <p>
  <label for="amount">Valor:</label>
  <input type="text" id="amount" name="amount" onchange="x()" />
</p>
​
<div id="slider-range-min"></div>
  <button id = "d">-</button>
  <button id = "a">+</button>
</body>
</html>
 
​
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 0,
      min: 1,
      max: 20,
      disabled: true,
      change: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
          x();
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
    
    $("button").click(function(){
        var valor = $("#slider-range-min").slider("value");
        $("#slider-range-min").slider("value", this.id == "a" ? ++valor : --valor);
    });
​
  function x()
  {
      alert("Hubo un cambio en el input #AMOUNT");
  }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers