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.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="slider-vertical"></div>
  <p>
  <label for="amount">Стоимость:</label>
  <input name="amount" type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" size="4">P
</p>
  
  
  <!-- Какой-то DIV -->
  <div id="bla"></div>
</body>
</html>
 
​
 
  $(function() {
    $("#slider-vertical").slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100000,
      step: 5000,
      value: 5000,
      slide: function(event, ui) {
        var txt;
        
        $("#amount").val(ui.value);
        
        // сравниваем значение с несколькими вариантами
        switch (ui.value) {
          case 10000:
            txt = 'ПРивет';
            break
          case 20000:
            txt = 'ПРИВЕТ ПРИВЕТ';
            break
          default:
            txt = '-';
        }
        
        // обновляем div
        $("#bla").html(txt);
​
      }
    });
    $("#amount").val($("#slider-vertical").slider("value"));
  });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers