jquery स्लाइडर इसके ऊपर मान के साथ जो स्लाइडर

Question

के साथ यात्रा करता है मैंने क्वेरी/स्लाइडर के साथ एक स्लाइडर बनाया है और इसे सीएसएस के साथ स्टाइल किया है। (http://jsfiddle.net/9qwmX/)

मैं चयनित मूल्य को एक div कंटेनर में रखने में सफल रहा; लेकिन अब मैं कंटेनर को स्लाइडर के साथ 'यात्रा' करना चाहता हूं। मैंने ui.handle और इसकी सीएसएस left संपत्ति का उपयोग करने की कोशिश की है जो एक प्रतिशत है। लेकिन व्यवहार कुछ हद तक अजीब है: कभी-कभी यह स्लाइडर के बाईं तरफ और कभी-कभी 10 पीएक्स के ऑफसेट के साथ यात्रा करता है।

प्रश्न: क्या किसी को हैंडल के साथ स्लाइड-मूल्य यात्रा वाले बॉक्स को जाने का अच्छा तरीका पता है?

Answer 1

तुम सिर्फ एक टूलटिप की तरह div कि आप संभाल करने के लिए जोड़ सकते हैं तो यह उसके साथ ले जाता है संलग्न कर सकते हैं। तुम बस, सीएसएस के साथ यह स्थिति इसलिए की तरह है:

जे एस

var initialValue = 2012; // initial slider value 
var sliderTooltip = function(event, ui) { 
    var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start) 
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>'; 

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle 
} 

$("#slider").slider({ 
    value: initialValue, 
    min: 1955, 
    max: 2015, 
    step: 1, 
    create: sliderTooltip, 
    slide: sliderTooltip 
}); 

सीएसएस^{टूलटिप चहचहाना बूटस्ट्रैप ढांचे से उधार}

.tooltip { 
    position: absolute; 
    z-index: 1020; 
    display: block; 
    padding: 5px; 
    font-size: 11px; 
    visibility: visible; 
    margin-top: -2px; 
    bottom:120%; 
    margin-left: -2em; 
} 

.tooltip .tooltip-arrow { 
    bottom: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-top: 5px solid #000000; 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
    position: absolute; 
    width: 0; 
    height: 0; 
} 

.tooltip-inner { 
    max-width: 200px; 
    padding: 3px 8px; 
    color: #ffffff; 
    text-align: center; 
    text-decoration: none; 
    background-color: #000000; 
    -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px; 
} 

डेमो: http://jsfiddle.net/9qwmX/2/

Answer 2

इस तरह मैंने इसे किया होगा।

var offset = $('.ui-slider-handle .ui-state-default .ui-corner-all"').offset(); 
var offsetLeft = offset.left; 
var offestTop = offset.top; 

स्थिति पूर्ण स्थिति के साथ अपने स्लाइड मूल्य बॉक्स::

"संभाल" स्थिति की

उपयोग करें: आरंभ करने के लिए

#tijdlijnDatum { position: absolute; } 

और slide स्थिति में इसके साथ कुछ करना :

$("#slider").slider({ 
    slide: function(event, ui) { 

     $('#tijdlijnDatum').css({ left: offsetLeft + 'px' }); // etc 
    } 
}); 

Answer 3

आप ऐसा कुछ करने के लिए ऐसा कर सकते हैं जो आप चाहते हैं टी, मैं event.pageX

var newLeft = 100; 
$('#move').text(100).css('margin-left',115); 
$("#slider").slider(
{ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50, 
      slide: function(event, ui) { 
       $("#slider-value").html(ui.value); 
       var pos = (event.pageX > newLeft)? event.pageX + 8 
                : event.pageX - 42; 
       newLeft = event.pageX;     
       $('#move').text(ui.value).css('margin-left',pos); 
      } 
} 
); 

डेमो उपयोग कर रहा हूँ:http://jsfiddle.net/joycse06/Cw6u8/1/