我正在尝试使用 css 实现如下图所示的效果,
我利用了这个 slider 并对其进行了修改。 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/
最佳答案
为了让你明白从哪里开始,我做了一个例子让你看看
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;
}
关于Jquery ui slider 背景和边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16561274/