0

次のようにJQueryスライダーを動的に作成します。

var slider = document.createElement("div");
        $(slider).slider({
            orientation: "vertical",
            range: "min",
        });

そして、彼にクラスを割り当て$(slider).slider().addClass("dhSliderDesktop"); ます。スライダーハンドルのいくつかの設定も上書きしますが、トラックに合わせることができません。私は何をしているのですか？手伝ってもらえますか...

CSS：

.dhSliderDesktop {
    position: absolute !important;
    right:9px !important;
    visibility:hidden;
    height: 100% !important;

    width:10px !important;
    color:green !important;
    background-color:red !important;
    background: blue !important;} 



.ui-slider .ui-slider-handle {

    width:40px !important;
    height:30px !important;

    left: -10.5px !important;
    border-style:none !important; 
    background-color: yellow !important;}

下の写真でわかるように、スライダーハンドルは、私が望まないコンテンツウィンドウから出ています。これを修正する方法は？

ここに画像の説明を入力してください

4

3 に答える 3

1

あなたがする必要があるのは、で遊ぶことだけです： 

    ui-slider .ui-slider-handle {  
    width: 40px !important;  
    height: 30px !important;  
    left: -10.5px !important;  
    ..

これらの値を変更すると、スライダーの寸法と位置が変更されます。

于 2013-03-05T12:02:31.313 に答える
1

これは、完全な青色のスライダーを表示するためのヘルパーとして、スライダー ウィジェットの周りにラッパー div を使用するソリューションです。実際のスライダーはラッパー内の中央に配置されており、パーセンテージ値を使用して、機能を外側のラッパー サイズから独立させようとしました (ただし、CSS の微調整が必​​要です)。

.slider-wrapper {
    height: 100%;
    width: 10px;
    margin: 0;
    right: 10px;
    background: blue;
    border-radius: 3px;
    position:absolute;
}
.slider-wrapper-range-min {
    height: 10%;
    width: 100%;
    margin: 0;
    right: 0;
    bottom: 0;
    background: red;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position:absolute;
}
.dhSliderDesktop {
    height: 80% !important;
    width: 100% !important;
    right: 0 !important;
    top: 10%;
    bottom: auto;
    border: none;
    background: blue !important;
    position: absolute;
} 

.ui-slider .ui-slider-handle {

    width:30px !important;
    height:24.5% !important;
    margin-bottom:-200%;
    margin-top: auto;

    left: -12px !important;
    background-color: yellow !important;
}

次の jQuery コードでアクティブ化します。

var $sliderWrapper = $('<div class="slider-wrapper"><div class="dhSliderDesktop"></div></div>');

$sliderWrapper
    .appendTo($(".wrapper"))
    .find(".dhSliderDesktop")
        .slider({
            orientation: "vertical",
            range: "min",
            change: function(event,ui) {
                console.log(ui.value);
            }
        })
        .end()
    .append( $('<div class="slider-wrapper-range-min"></div>') )
;

編集：これはjsfiddleへの更新されたリンクです

于 2013-03-05T14:08:21.350 に答える