тултипы для двух связных слайдеров

 

 

 

  <meta charset="utf-8">

 

  <title>slider demo</title>

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

 

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

 

  <style type="text/css">

 

  body{

 

    background-color:#EEE8AA;

 

  }

 

 

 

  #slider0,#slider1{

 

    margin:10px;

 

    width:8px;

 

    height:300px;

 

    float:left;

 

    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-slider-handle{

 

    border-radius:50%;

 

    position:relative;

 

    font-size:10px;

 

 

  }

 

 

 

  .ui-slider-vertical .ui-slider-handle{

 

    padding-top:8px;

 

    left:-.6em;

 

    background-color:transparent;

 

    border:4px solid #D2691E;

 

    background-image:none;

 

    margin-bottom: -1.2em;

 

  }

 

 

 

  :focus{

 

    outline:0;

 

    border:0;

 

  }

 

  </style>

 

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">

 

 

 

 

  <div id="slider0"></div>

 

  <div id="slider1"></div>

 

 

var sliders = $("#slider0, #slider1");

 var tooltip = $('<div id="tooltip" />').css({

    position: 'absolute',

    top: -25,

    left: -10

});

sliders.slider({

 

    orientation: "vertical",

 

    value: 50,

 create: function( event, ui ) {

   tooltip.text(50);

       

    },

    slide: function(event, ui) {

 tooltip.text(ui.value);

        var i = sliders.index(this);

 

        i ^= 1;

 

        $("#slider" + i).slider("option", "value", 100 - ui.value)

 

    }

 

}).find(".ui-slider-handle").append(tooltip);;

 

  </script>