0

レンジ スライダーに関する別の質問に戻ってきました。必要な幅と高さの範囲スライダーがあります。私が抱えている問題は、ハンドルのサイズと位置にあります。ハンドルをスライダー自体よりも高く設定し、ハンドルを正しい位置に配置しましたが、オーバー ハングなしでハンドルをスライダー自体に合わせる方法がわかりません。私は周りを検索しましたが、実行可能なものは何も見つかりませんでした

私のCSSファイルは

div.ui-slider-range.ui-widget-header {
background:#C6DC84;  
height:42px; 
}
div.ui-widget-content {
background: #D3D3D3;
height:42px;
}

div.ui-slider-horizontal .ui-slider-handle {
background:#A18ABF;
text-decoration:none;
width:5px;
height:42px;
margin-left:-2px;
border:none;

}

そして私のJqueryは

$(function () {

          $("#slider-range-Monday").slider({

              range: true,

              min: 0,

              max: 24,

              values: [0, 24],

              animate: 'slow',

              slide: function (event, ui) {

                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

              }

          });

          $("#amount").val("$" + $("#slider-range").slider("values", 0) +

            " - $" + $("#slider-range").slider("values", 1));

});

私はCSSに何かが欠けていることをほぼ確信しています。

ありがとう

4

1 に答える 1

0

jQuery UI は、デフォルトposition:relativeとtop: -2pxスライダー ハンドルを定義します。私がする必要があるのは、それを削除することだけです。

だから私はCSSに追加しました：

div.ui-slider-horizontal .ui-slider-handle {
    ...
    top: 0;    /* override jQuery UI defaults */
}

ここで動作しています: JSFiddle。

于 2013-11-13T23:11:15.337 に答える