jQuery यूआई स्लाइडर और हैंडल-संशोधन

Question

मैं मानक jQueryUI स्लाइडर का उपयोग करता हूं और हैंडल की उपस्थिति को बदलना चाहता हूं। मैं

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded; } 
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

मैं वैसा ही किया करने के लिए सीएसएस बदल गया है, संभाल "स्लाइडर लेन" में बैठे है। लेकिन अगर हैंडल को सही स्थिति में ले जाया गया है, तो यह सिर्फ अपनी लेन के बाहर बैठता है। बेशक मैं .ui-slider-handle के मार्जिन-बाएं से -20px सेट कर सकता था। लेकिन फिर दोनों सिरों पर यह अपनी लेन ओवरलैप करता है।

क्या यह ui-slider-range-max के साथ कुछ करने के लिए है? लेकिन जब फायरबग के माध्यम से स्लाइडर का निरीक्षण करते हैं, तो इस सीएसएस-क्लास का कहीं भी उपयोग नहीं किया जाता है।

Answer 1

कक्षा ui-slider-range-max एक निश्चित अधिकतम बिंदु के साथ एक स्लाइडर के सीमा भाग को दिया जाता है। इस तरह: http://jqueryui.com/demos/slider/#rangemax

आप Firebug में उस वर्ग को नहीं देख पा तो शायद आप स्लाइडर के प्रकार उपयोग नहीं कर रहे

मुझे लगता है कि तुम क्या कह रहे हैं कि कैसे में संभाल के बाएँ किनारे रोक लाना है "स्लाइडर-लेन" के बाएं किनारे और हैंडल का दायां किनारा "स्लाइडर-लेन" के दाएं किनारे से नहीं निकलता है। Ie: स्लाइडर-लेन

यदि यह ऐसा है, तो आप पृष्ठभूमि को हटाने और ui स्लाइडर div से दिखाई देने वाली किसी भी चीज़ को "स्लाइडर-लेन" के भीतर रहने के लिए प्रतीत कर सकते हैं।

उदाहरण:

.ui-slider-horizontal { height: 10px; border: 0; background: none } 

फिर अपनी पृष्ठभूमि के साथ एक कंटेनर div अंदर स्लाइडर लपेट दें। कंटेनर div को "स्लाइडर-लेन" के रूप में देखा जा सकता है और आप इसे आवश्यक पैडिंग दे सकते हैं ताकि हैंडल स्लाइडर-लेन के भीतर रह सके।

उदाहरण:

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;} 

भी संभाल margin-left रीसेट वापस यह क्या था अगर आप छोड़ दिया और सही कंटेनर div में, नहीं तो सिर्फ सही पर गद्दी का उपयोग पर गद्दी की है।