Показать сообщение отдельно
  #9 (permalink)  
Старый 05.11.2013, 09:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,884

slider ползунок UI две рукоятки
tai,

примерно будет так ... вариант без использования ui.values ... хотелось бы мне знать другие способы ... css уточните согласно вашей разметке...
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
  <style>
  #slider { margin: 10px;width : 500px; }
  .show1{
       position: relative;
       width: 30px;
       top: 25px;

    }
  .show2{
       position: relative;
       width: 30px;
       top: 5px;
       left: 500px;
       margin-left:  -5px;
    }
  	</style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>

<body>
<div class="show1">0</div><div class="show2">50000</div>
<div id="slider"></div>
<script>

$( "#slider" ).slider(
   {
   range: true,
   min: 0,
   max: 50000,
   values: [ 0, 50000 ],
   change: function( event, ui ) {
   var index = $(ui.handle).index();
   var left = $(ui.handle).css("left");
   $(".show"+index).html(ui.value).css({left : left} )  },
   slide: function( event, ui ) {
   var index = $(ui.handle).index();
   var left = $(ui.handle).css("left");
   $(".show"+index).html(ui.value).css({left : left} )  }
   }
);
</script>
</body>
</html>
Ответить с цитированием