2

私は初めてjQuery-uiスライダーを使用していますが、かなり基本的な問題に混乱しています。スライダーを設定するときは、テーマを使わずに設定したいです。左から右にスライドすると、スライダーハンドルの右側の位置がスライダーを超えて1ハンドル幅になります。これは、スライダーcssがハンドルを左に配置しているためです：100％。他の多くの人が問題なくスライダーを使用していることに気づきましたが、彼らがこの問題をどのように回避しているかはわかりません。
問題のデモ
私は恥ずかしいほど基本的な何かが欠けていると思います、そして何を知りたいです。
どうもありがとう

4

5 に答える 5

2

これをもう少し読んでみると、スライダーは説明されているように動作するように設計されているようですが、ハンドルはその幅の50％だけ左にオフセットされています。したがって、バーの中心は値を示します-これは完全に意味があります（スライダーが値を示す場合）。
スライダーをスクロールバーとして使用するには、スライダーの幅の50％で左右に埋め込まれたdivでスライダーをラップするだけです。これを反映するようにデモを更新しました。
誰かが余分なdivを必要とせずに、より良い解決策を持っているなら、私はそれを見たいと思います。

于 2011-03-13T17:59:54.410 に答える
0

デモを確認しました。いくつかのcssファイルがありません。jqueryuiサイトからcssファイルもダウンロードしましたか。たとえば、ui-widget-contentは、スライダーバーの幅とスライダーにないものを指定するcssです。cssを取得してページにリンクすると、問題がないはずです。

于 2011-03-13T16:04:15.830 に答える
0

左マージンまたはハンドルの幅のマイナス半分を設定します

于 2011-03-29T22:44:57.657 に答える
0

また、スライダーに渡される値が整数であることを確認するのにも役立ちます。スライダーのポインターが間違った場所にあるという問題がいくつかありましたが、parseInt（）を使用して値を整数に強制すると、次のようになります。

値：parseInt（whateverValue）

それはうまくいきました。

于 2011-09-07T10:37:27.183 に答える
0

私はcssの「翻訳」プロパティがここで最良のオプションだと思います...

.ui-slider-horizontal .ui-slider-handle {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
}

変換ピクセル値をニーズに合わせて調整します:)

于 2018-03-06T10:07:11.067 に答える