我試圖使用Ion.RangeSlider 2.0.3Ion.RangeSlider 2.0.3
URL:http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
所以我想修改滑蓋三種顏色。左,中,右同樣。我附上了這張圖片,以便了解我想要的內容。
所以我需要你的幫助來定製這個滑塊。
謝謝。
我試圖使用Ion.RangeSlider 2.0.3Ion.RangeSlider 2.0.3
URL:http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
所以我想修改滑蓋三種顏色。左,中,右同樣。我附上了這張圖片,以便了解我想要的內容。
所以我需要你的幫助來定製這個滑塊。
謝謝。
我做了類似的事情。這裏是相關的CSS和JavaScript代碼段來實現它。 讓說,我想左側的綠色,黃色中期和右側紅色,然後
CSS
.irs-line-left {
background: #66b032;
width: 60%;
}
.irs-line-mid {
background: #FFBF00;
}
.irs-line-mid:before {
content: '';
background-color: #FF0000;
position: absolute;
left: 54%;
top: 0;
right: 0;
bottom: 0;
}
.budget-page .irs-line-right {
background: #FF0000;
width: 40%;
}
.budget-page .irs-line-mid {
width: 0 !important;
}
.irs-bar {
background: #FFBF00;
}
現在這裏的伎倆。當你改變兩點時,我們需要改變左右寬度來動態改變顏色寬度。
Javascript部分。
var iri_line_left = $(".irs-line-left");
var iri_line_right = $(".irs-line-right");
$("#color-slider").ionRangeSlider({
type: "double",
min: 0,
max: 100,
from: 60,
to: 80,
grid: true,
onChange: function (data) {
var leftWidth = Math.ceil(data.from_percent);
var rightWidth = 100 - leftWidth;
// set left side width
iri_line_left.css({ 'width': leftWidth + "%" });
// set right side width
iri_line_right.css({ 'width': rightWidth + "%" });
}
});
希望這會幫助你。
可以很好
.irs-line {
// needs latest Compass, add '@import "compass"' to your scss
@include background-image(linear-gradient(left, #32ff6c 0%,#28ff57 33%,#207cca 33%,#2989d8 66%,#ff3030 66%,#ff0000 100%));
}
對這個插件做了很大的調整!請記住,您還需要確保在重新調整窗口大小時對此進行重新檢查,否則設置的寬度與液體/響應式設計的文檔/主體寬度不成比例。 – 2015-06-28 12:54:07