Тема: jquery ui slider
Показать сообщение отдельно
  #7 (permalink)  
Старый 24.03.2015, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

gam0ra, вариант серобуромалиновый без крапинок
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Slider - Slider bound to select</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <style type="text/css">
#slider { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)

}
  .ui-widget-header	{
    background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
    background-image: -o-linear-gradient(left, #FF1493, #0060BF);
    background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
    background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
    background-image: linear-gradient(to right, #FF1493, #0060BF)
  }

  .ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
  .ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
    :focus {
 outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
 border: 0;
 }
  </style>


  <script>

  $(function() {
    var arr = [0,100000,300000,750000,1500000,3000000];
    var input = $( "#minbeds" );

    var slider = $( "<div id='slider'></div>" ).insertAfter( input ).slider({

      min: 0,

      max: 5000,

      range: "min",
      animate: "slow" ,
      stop:  function( event, ui ) {

        var num =  Math.round(ui.value/1000 );
         window.setTimeout(function ()
{
  slider.slider( "option", "value", num * 1000 );
},600)
       //
      },
      change: function( event, ui ) {

        var num =  Math.round(ui.value/1000 );
        input.val(arr[num]) ;

      },

      slide: function( event, ui ) {
        var num =  Math.round(ui.value/1000 ) ;
        input.val(arr[num]) ;

      }

    });

   slider.slider( "option", "value", 2000 );

  });

  </script>

</head>

<body>



<form id="reservation">

  <label for="minbeds">$</label>

  <input name="minbeds" id="minbeds">

</form>





</body>

</html>
Ответить с цитированием