スライダでエンドポイントを移動する方法html

Question

価格帯から選択するためにスライダを作ろうとしています。私はレンジボタンがクリックされたときに、それはしかし、彼らは移動することはできませんしたいと

.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; 
} 

スライダが正確に表示されている：

これは

        <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私のHTMLコードです。

何らかの形式のスクリプトを作成する必要がありますか？ CSSを使ってこれを制御できますか？

ありがとうございました

Answer 1

これは答えではなく、長い長いコメントです。

（1）私たちがトラブルシューティングを行うには、スライダーHTMLとjsを十分に用意していません。それは自己作成のスライダーか、ダウンロードしたスライダーですか？ もしそうなら、どちらですか？

（2）インラインCSSと外部CSSが混在しています。悪いアイデア。実際には、インラインCSS （style=""）は常に悪い考えです。

（3）このスライダはどのように機能するのですか？ユーザーがleftPまたはleftSTをクリックしたときに何が起こりますか？それらは何をすべきですか？

（4）あなたは正しいです：ほとんどのスライダーはjavascript/jQueryで動作します。これは、Webページがユーザーのクリックを検出して何かを行う唯一の方法です。

（5）あなたはleft:0%を使用して、positionを要素に割り当てています。 top:leftなどは、position:staticの要素では機能しません。変更されない限り、デフォルトです。私たちの多くは、私たちのCSSの最上部に、このような何かを：

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

（6）下記jsFiddleを編集し、最終的な所望の生成物へのそれは近いしてください。あなたの質問が書かれているので、私はあなたをさらに助ける方法を見ることができません。

jsFiddle Example