Jquery-ползунок с маркером

359

07 июня 2017, 03:42

Подскажите, как добавить маркер к jquery.slider ?

т.е. там где надпись 50км, как можно добавить этот блок?

Answer 1

Вот один из вариантов решения на основе документации, только нормально стилями подправить.

  $( function() { 
    var handle = $( "#custom-handle .value-output" ); 
    $( "#slider" ).slider({ 
      create: function() { 
        handle.text( $( this).slider( "value" ) ); 
      }, 
      slide: function( event, ui ) { 
        handle.text( ui.value ); 
      } 
    }); 
  } );

 #custom-handle { 
width: 3em; 
height: 1.6em; 
top: 50%; 
margin-top: -.8em; 
text-align: center; 
line-height: 1.6em; 
position:relative; 
  } 
   
.value-wrapper { 
display: block; 
position: absolute; 
top: 34px; 
left: -4px; 
border: 1px solid grey; 
right: -13px; 
color: #000000; 
} 
.value-wrapper::before { 
content: ''; 
position: absolute; 
display: block; 
left: 20px; 
top: -16px; 
border: 5px solid transparent; 
border-bottom: 10px solid grey; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  
<div id="slider"> 
  <div id="custom-handle" class="ui-slider-handle"><span class="value-wrapper"><span class="value-output"></span> км/ч</span></div> 
</div>