0

cssを使用して下の画像のようなものを達成しようとしていますが、

ここに画像の説明を入力

このスライダーを利用して修正しました。http://jqueryui.com/slider/#steps

上の画像と同じ出力を得るには、どの css 値を変更する必要がありますか?

これが私のコードです：

var valMap = [1, 2, 3, 4, 5, 6,7,8,9];
    value= 0;
    var lastSlideValue = 0;
    var internalSlideCalling = false;

    var slider = $("#slider").slider({
    disabled : false,
    animate : true,
    min : 0,
    max : valMap.length - 1,
    slide : function(event, ui) {
        slider.slider("option", "animate", "slow");
    },
    change: function(){

        var Slideval = $(this).slider('value');

        if (!internalSlideCalling)
        {
            if (Slideval>lastSlideValue && lastSlideValue < $(this).slider('option','max'))
            {
                Slideval = lastSlideValue+1;
            }
            else if (lastSlideValue > $(this).slider('option','min'))
            {
                Slideval = lastSlideValue-1;                
            }
            lastSlideValue = Slideval;
        }

        console.log(Slideval, value)

        if(value < Slideval) {
          console.log("incremented")
        } else if(value > Slideval){
          console.log("decremented")
        }
        value = Slideval;

        if (!internalSlideCalling){
            internalSlideCalling = true;
            $(this).slider('value',Slideval);
        }
        else 
            internalSlideCalling = false;
    }
});

$("#slider").slider('values',valMap);

ここに jsfiddle があります: http://jsfiddle.net/endl3ss/fVj78/

4

2 に答える 2

2

どこから始めればよいかを理解してもらうために、例を作成しました。

http://jsfiddle.net/fVj78/1/

body{
 background:#000;
}
.ui-slider-handle, .ui-state-hover, .ui-state-default{
 height: 20px important;
 width: 20px;
 background: orange !important;
 border-radius: 0;
 top: 0 !important;  
 border:0 !important;
}
.ui-slider{
 border-radius: 0;
 height: 21px !important; 
 background: #000;
 border-color :#fff !important;
 }
于 2013-05-15T09:42:16.800 に答える
0

背景画像を使用して、目的の効果を実現できます。

CSS

div[id=slider] {
    background:url(images) no-repeat center;
    border-radius:4px;
    height:11px;
    margin:0;
    padding:0;
    width:390px
}

jsFiddleの例を次に示します。

于 2013-05-15T11:02:33.133 に答える