使用圆形点自定义jQuery ui滑块 [英] Customize jQuery ui slider using circular pips
问题描述
我正在创建一个输入范围滑块,允许用户选择1992-2017年范围内的年份. 我正在使用最佳jQuery库.
这是我创建的: PLUNKER . /p>
html :
<div id='slider2'>
<div id="circles-slider"></div>
</div>
css :
body {
font-size: 9pt;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#slider2 {
padding: 30px;
width: 500px;
background-color: lime;
}
#circles-slider.ui-slider {
border-radius: 20px;
background: #434d5a;
border: none;
height: 10px;
margin: 1em 4em 4em;
}
#circles-slider .ui-slider-handle {
border-radius: 18px;
height: 18px;
width: 18px;
top: -4px;
margin-left: -9px;
border: 1px solid white;
}
#circles-slider .ui-slider-pip {
top: 3px;
}
#circles-slider .ui-slider-pip .ui-slider-line {
width: 4px;
height: 4px;
border-radius: 4px;
margin-left: -2px;
background: white;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
top: -7px;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
display: none;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
margin: 0;
}
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
left: -2em;
text-align: right;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
left: 2em;
text-align: left;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
font-weight: normal;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected {
font-weight: bold;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
color: #434d5a;
}
.ui-slider-pips .ui-slider-label {
color: black;
top: 7px;
}
.ui-slider-label {
margin-top: 6px;
}
js :
var labels = [];
labels[0] = "1992";
labels[5] = "1997";
labels[10] = "2002";
labels[15] = "2007";
labels[20] = "2012";
labels[25] = "2017";
$("#circles-slider")
.slider({
min: 1992,
max: 2017,
value: 2016,
step: 1
})
.slider("pips", {
first: "label",
last: "label",
rest: "label",
labels: labels,
step: 1
})
.slider("float", {
labels: labels
});
这就是我想要得到的:
我快到了.但是,我想要这样:
- 所有标签都位于灰线的底部(即使是1992年初和2017年底标签)
- 与年份相关的点的颜色与其他颜色不同(在本例中为橙色)
- 所选年份位于滑块的右侧
- 绿色空间太大,我无法处理.它应该小得多(必须包含所选年份的滑块和标签).
我需要帮助.
演示: https://plnkr.co/edit/fT0Kbgwl9oEKSpf8dmwI?p=preview
- 您已经添加了一些额外的样式,需要删除这些样式才能将第一个标签和最后一个标签置于滑块下方.
#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
top: -7px;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
display: none;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
margin: 0;
}
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
left: -2em;
text-align: right;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
left: 2em;
text-align: left;
}
- 您需要根据我的理解为每第5个点上色.您可以使用:
#circles-slider .ui-slider-pip:nth-child(5n+2) .ui-slider-line{
background-color: orange;
}
PS:5n应该可以工作了.我需要再次检查.
- 我已经通过使用slide2上的flex布局并将.ui-slider的宽度设置为85%来做到这一点.因此,您的HTML应该像这样:
<div id='slider2'>
<div id="circles-slider">
</div>
<span id="selected-year-label"></span>
</div>
- 您可以根据需要通过#slider2和.ui-slider的边距和填充进行操作.
要更新滑块上的当前值,我添加了slidechange事件侦听器.因此,您的JS变为:
const SLIDER_INITIAL_VAL = 2016;
var labels = [];
labels[0] = "1992";
labels[5] = "1997";
labels[10] = "2002";
labels[15] = "2007";
labels[20] = "2012";
labels[25] = "2017";
$("#circles-slider")
.slider({
min: 1992,
max: 2017,
value: SLIDER_INITIAL_VAL,
step: 1
})
.slider("pips", {
first: "label",
last: "label",
rest: "label",
labels: labels,
step: 1
});
$("#selected-year-label").html(SLIDER_INITIAL_VAL);
$("#circles-slider").on("slide.selectPip slidechange.selectPip", function(e, ui) {
var slider_val = $("#circles-slider .ui-slider-pip-selected .ui-slider-label").attr("data-value");
$("#selected-year-label").html(slider_val);
});
下面的CSS可以编译以上所有内容,并且应该对您有用:
body {
font-size: 9pt;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#slider2 {
padding: 10px;
width: 500px;
background-color: lime;
display: flex;
}
#circles-slider.ui-slider {
margin: 1em 1em 2em;
width: 85%;
}
#circles-slider.ui-slider::before {
content: "";
position: absolute;
right: -4%;
left: -4%;
background: #434d5a;
height: 10px;
border: none;
border-radius: 20px;
}
#selected-year-label {
margin-top: 10px;
margin-left: 10px;
}
#circles-slider .ui-slider-handle {
border-radius: 18px;
height: 18px;
width: 18px;
top: -4px;
margin-left: -9px;
border: 1px solid white;
}
#circles-slider .ui-slider-pip {
top: 3px;
}
#circles-slider .ui-slider-pip:nth-child(5n+2) .ui-slider-line {
background-color: orange;
}
#circles-slider .ui-slider-pip .ui-slider-line {
width: 4px;
height: 4px;
border-radius: 4px;
margin-left: -2px;
background: white;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
font-weight: normal;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected {
font-weight: bold;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
color: #434d5a;
}
.ui-slider-pips .ui-slider-label {
color: black;
top: 7px;
}
.ui-slider-label {
margin-top: 6px;
}
I am creating an input range slider that allows the user to choose a year in the 1992-2017 range. I'm using the Best jQuery library.
Here's what I created: PLUNKER.
html:
<div id='slider2'>
<div id="circles-slider"></div>
</div>
css:
body {
font-size: 9pt;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#slider2 {
padding: 30px;
width: 500px;
background-color: lime;
}
#circles-slider.ui-slider {
border-radius: 20px;
background: #434d5a;
border: none;
height: 10px;
margin: 1em 4em 4em;
}
#circles-slider .ui-slider-handle {
border-radius: 18px;
height: 18px;
width: 18px;
top: -4px;
margin-left: -9px;
border: 1px solid white;
}
#circles-slider .ui-slider-pip {
top: 3px;
}
#circles-slider .ui-slider-pip .ui-slider-line {
width: 4px;
height: 4px;
border-radius: 4px;
margin-left: -2px;
background: white;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
top: -7px;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
display: none;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
margin: 0;
}
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
left: -2em;
text-align: right;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
left: 2em;
text-align: left;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
font-weight: normal;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected {
font-weight: bold;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
color: #434d5a;
}
.ui-slider-pips .ui-slider-label {
color: black;
top: 7px;
}
.ui-slider-label {
margin-top: 6px;
}
js:
var labels = [];
labels[0] = "1992";
labels[5] = "1997";
labels[10] = "2002";
labels[15] = "2007";
labels[20] = "2012";
labels[25] = "2017";
$("#circles-slider")
.slider({
min: 1992,
max: 2017,
value: 2016,
step: 1
})
.slider("pips", {
first: "label",
last: "label",
rest: "label",
labels: labels,
step: 1
})
.slider("float", {
labels: labels
});
This is what I would like to get:
I'm almost there. I would however like that:
- all the labels are bottom the grey line (even the start 1992 and end 2017 labels)
- the dots relating to the years with the label have a different color than the others (in this case they are orange)
- the selected year is positioned to the right of the slider
- the green space is too large, I can not handle it. It should be much smaller (necessary to contain the slider and the label of the chosen year).
I need help.
DEMO: https://plnkr.co/edit/fT0Kbgwl9oEKSpf8dmwI?p=preview
- You've added some extra styles which you need to remove to get the first and last labels below the slider.
#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
top: -7px;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
display: none;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
margin: 0;
}
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
left: -2em;
text-align: right;
}
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
left: 2em;
text-align: left;
}
- You need to color every 5th dot from what i understand. You can do this using:
#circles-slider .ui-slider-pip:nth-child(5n+2) .ui-slider-line{
background-color: orange;
}
PS: 5n should have worked. I need to check this again.
- I've done this by using the flex layout on slider2 and setting the width of .ui-slider 85%. So your HTML should be like:
<div id='slider2'>
<div id="circles-slider">
</div>
<span id="selected-year-label"></span>
</div>
- You can do this by playing with the margin and padding of #slider2 and .ui-slider as per your needs.
To update the current value on slider I've added the slidechange event listeners. So your JS becomes:
const SLIDER_INITIAL_VAL = 2016;
var labels = [];
labels[0] = "1992";
labels[5] = "1997";
labels[10] = "2002";
labels[15] = "2007";
labels[20] = "2012";
labels[25] = "2017";
$("#circles-slider")
.slider({
min: 1992,
max: 2017,
value: SLIDER_INITIAL_VAL,
step: 1
})
.slider("pips", {
first: "label",
last: "label",
rest: "label",
labels: labels,
step: 1
});
$("#selected-year-label").html(SLIDER_INITIAL_VAL);
$("#circles-slider").on("slide.selectPip slidechange.selectPip", function(e, ui) {
var slider_val = $("#circles-slider .ui-slider-pip-selected .ui-slider-label").attr("data-value");
$("#selected-year-label").html(slider_val);
});
Below CSS compiles all the above and should work for you:
body {
font-size: 9pt;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#slider2 {
padding: 10px;
width: 500px;
background-color: lime;
display: flex;
}
#circles-slider.ui-slider {
margin: 1em 1em 2em;
width: 85%;
}
#circles-slider.ui-slider::before {
content: "";
position: absolute;
right: -4%;
left: -4%;
background: #434d5a;
height: 10px;
border: none;
border-radius: 20px;
}
#selected-year-label {
margin-top: 10px;
margin-left: 10px;
}
#circles-slider .ui-slider-handle {
border-radius: 18px;
height: 18px;
width: 18px;
top: -4px;
margin-left: -9px;
border: 1px solid white;
}
#circles-slider .ui-slider-pip {
top: 3px;
}
#circles-slider .ui-slider-pip:nth-child(5n+2) .ui-slider-line {
background-color: orange;
}
#circles-slider .ui-slider-pip .ui-slider-line {
width: 4px;
height: 4px;
border-radius: 4px;
margin-left: -2px;
background: white;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
font-weight: normal;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected {
font-weight: bold;
}
#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
color: #434d5a;
}
.ui-slider-pips .ui-slider-label {
color: black;
top: 7px;
}
.ui-slider-label {
margin-top: 6px;
}
这篇关于使用圆形点自定义jQuery ui滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!