Kaydırıcıda son noktalar nasıl hareket edilir html

Question

Bir fiyat aralığından seçim yapmak için kaydırıcı yapmaya çalışıyorum. Ben aralık düğmeleri tıklandığını zaman ancak onlar taşınamaz istediğiniz gibi

.ui-slider .ui-slider-handle{ 
    width:50px; 
    height:50px; 
    background:url(Images/) no-repeat; overflow: hidden; 
    position:absolute; 
    top: -10px; 
    border-style:none; 
} 

.ui-slider-horizontal { 
    height: 1px; 
} 

.ui-corner-all { 
    border-radius: 12px; 
} 

.ui-slider { 
    position: relative; 
    text-align: left; 
    margin-left: 0.76923em; 
    width: 95%; 
    background-color: #e9e9e9; 
} 
.ui-slider .ui-slider-handle { 
    cursor: pointer; 
    height: 1.15385em; 
    position: absolute; 
    width: 1.15385em; 
    z-index: 2; 
} 

.ui-slider-horizontal .ui-slider-handle { 
    background-color: #da4d4d; 
    margin-left: -0.6em; 
    top: -0.5em; 
} 

.search-price-collateresult { 
    position: relative; 
    width: 90%; 
    padding: 0 0 0px 0; 
} 

a { 
    color: #000; 
    text-decoration: none; 
    line-height: inherit; 
} 

a:focus 
{ 
    outline:none; 
} 

a:hover 
{ 
    color:black; 
} 

sürgü tam görüntülenmekte olduğunu:

Bu

        <div class="search-price-collateresult"> 
             <div style="clear:both;" id="PriceSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"> 
              <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"> 
              </div> 
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"> 
              </a> 
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"> 
              </a> 
             </div> 
             <div id="range"> 
              <div style="width: 55px; left: 0%; position: absolute; top: 11px; margin-left: 0px;" id="leftP">€5</div> 
              <div style="left: 100%; top: 11px; position: absolute; margin-left: -0.6em;" id="rightP">€30</div> 
              <div style="left:0%;position: absolute;top:11px;margin-left: -0.6em;display:none;" id="leftST">5</div><div style="left: 100%; top: 11px; position: absolute; margin-left: -0.6em;display:none;" id="rightST"> 
               30 
              </div> 
             </div> 
            </div> 

CSS benim HTML kodudur.

Bazı komut dosyası oluşturmak zorunda mıyım? veya bu CSS kullanılarak kontrol edilebilir mi?

Teşekkür

Answer 1

Bu cevap, sadece uzun açıklama değildir.

(1) Sorun gidermek için kaydırıcı HTML'nizi ve js'lerinizi yeterince sağlamadınız. Kendinden yazılmış bir kaydırıcı mı yoksa indirdiğiniz mi? Varsa hangisi?

(2) Harici CSS ile satır içi CSS'ye sahipsiniz. Kötü bir fikir. Aslında, satır içi CSS (style="") her zaman kötü bir fikirdir.

(3) Bu kaydırıcı nasıl çalışır? Kullanıcı leftP veya leftST'u tıkladığında ne yapmak istersiniz? Ne yapması gerekiyor?

(4) Haklısınız: çoğu kaydırıcı javascript/jQuery ile çalışır. Bu, web sayfasının bir kullanıcının tıkladığını algılaması ve bir şey yapması için tek yöntemdir.

(5) Bir gözlem: öğeye position atayarak left:0% kullanıyorsunuz. top:left vb. Yalnızca position:static numaralı elemanlarda çalışmaz, değiştirilmedikçe varsayılan değerdir. Birçoğumuz bizim CSS üstündeki böyle bir şey yapmak:

* {position:relative;box-sizing:border-box;padding:0;margin:0;} 

(6) jsFiddle altında düzenleyebilir ve daha yakın son istenen ürüne bunu yapın. Sorunuz yazıldıkça, size nasıl yardımcı olabileceğimizi göremiyorum.

jsFiddle Example