造型的jQuery UI滑塊前處理

我有一個要求，以創建一個滑塊控件，如下所示：造型的jQuery UI滑塊前處理

我使用jQuery UI滑塊來實現這一點，有工作到一個地步，我不知道如何在處理之前對藍條進行設計。

這是我怎麼現在正在尋找

這裏是呈現的HTML產生這種滑塊：

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> 
    <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 45.4545%;"></span> 
</div>

我猜我應該使用呈現的一個類顯示藍色欄，但不知道如何實現這一點。

來源

2016-07-01 lisburnite

我已經更新了color picker demo使範圍欄看起來像你所擁有的，使用下面的CSS：

.ui-slider-range { 
    height: 2px !important; 
    top: 6px !important; 
    margin-left: 2px; 
}

function hexFromRGB(r, g, b) { 
 
    var hex = [ 
 
    r.toString(16), 
 
    g.toString(16), 
 
    b.toString(16) 
 
    ]; 
 
    $.each(hex, function(nr, val) { 
 
    if (val.length === 1) { 
 
     hex[nr] = "0" + val; 
 
    } 
 
    }); 
 
    return hex.join("").toUpperCase(); 
 
} 
 

 
function refreshSwatch() { 
 
    var red = $("#red").slider("value"), 
 
    green = $("#green").slider("value"), 
 
    blue = $("#blue").slider("value"), 
 
    hex = hexFromRGB(red, green, blue); 
 
    $("#swatch").css("background-color", "#" + hex); 
 
} 
 
$(function() { 
 
    $("#red, #green, #blue").slider({ 
 
    orientation: "horizontal", 
 
    range: "min", 
 
    max: 255, 
 
    value: 127, 
 
    slide: refreshSwatch, 
 
    change: refreshSwatch 
 
    }); 
 
    $("#red").slider("value", 255); 
 
    $("#green").slider("value", 140); 
 
    $("#blue").slider("value", 60); 
 
});

#red, 
 
#green, 
 
#blue { 
 
    float: left; 
 
    clear: left; 
 
    width: 300px; 
 
    margin: 15px; 
 
} 
 
#swatch { 
 
    width: 120px; 
 
    height: 100px; 
 
    margin-top: 18px; 
 
    margin-left: 350px; 
 
    background-image: none; 
 
} 
 
#red .ui-slider-range { 
 
    background: #ef2929; 
 
} 
 
#red .ui-slider-handle { 
 
    border-color: #ef2929; 
 
} 
 
#green .ui-slider-range { 
 
    background: #8ae234; 
 
} 
 
#green .ui-slider-handle { 
 
    border-color: #8ae234; 
 
} 
 
#blue .ui-slider-range { 
 
    background: #729fcf; 
 
} 
 
#blue .ui-slider-handle { 
 
    border-color: #729fcf; 
 
} 
 
.ui-slider-range { 
 
    height: 2px !important; 
 
    top: 6px !important; 
 
    margin-left: 2px; 
 
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> 
 
    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> 
 
    Simple Colorpicker 
 
</p> 
 

 
<div id="red"></div> 
 
<div id="green"></div> 
 
<div id="blue"></div> 
 

 
<div id="swatch" class="ui-widget-content ui-corner-all"></div>

來源

2016-07-01 11:03:57

哇，這是完美的，由於非常很多 – lisburnite

剛剛意識到我需要的重要部分是'範圍：「min」' – lisburnite

@ lisburnite只有它注入臨時t範圍元素... –

您可以使用<div>元素與float: left; background-color: blue;，並使用JavasSript設置此元素的寬度。這個元素的寬度是滑塊中綠點的位置！

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> 
    <div style="float: left; background-color: blue; width: 45.4545%; height: 2px;"></div> 

    <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 45.4545%;"></span> 
</div>

來源

2016-07-01 09:56:42 MHS

造型的jQuery UI滑塊前處理

回答

相關問題