使用步骤时向 RoundSlider 添加特定点
Adding specific points to RoundSlider when using steps
目前正在使用 roundslider 插件 (http://roundsliderui.com/)。我已将值分成三份 (33) 并将工具提示更改为文本值。
我想在步骤所在的位置添加特定的图形点(例如圆圈)以指示用户将滑块拖动到的步骤。在文档中找不到任何与添加此功能相关的内容,所以只是想知道这是否可行,或者是否有人使用插件自己实现了此功能。
js:
$("#slider-text").roundSlider({
sliderType: "min-range",
editableTooltip: false,
width: 10,
handleSize: 27,
startAngle: 90,
radius: 91,
step: 33,
max: 99,
change: "updateBundle",
tooltipFormat: "changeTextsAndMinsTooltip"
});
function changeTextsAndMinsTooltip(e) {
var val = e.value, content;
if (val < 33) content = 0;
else if (val < 66) content = "10 or less";
else if (val < 99) content = "10 to 30";
else content = "30 or more";
return "<div>" + content + "<div>";
}
scss:
// Slider Styling
.rs-control {
.rs-range-color {
background-color: $green;
}
.rs-border {
border: none;
}
.rs-path-color {
background-color: #E0E0E0;
}
.rs-handle {
background-color: $green;
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
.rs-handle.rs-move {
cursor: pointer;
}
.rs-tooltip.rs-tooltip-text {
font-size: 19px;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
我最初的想法是使用滑块 div 上的 ::after
在台阶上添加圆圈。只是想知道是否有更强大的方法来实现这个。
如果有人能解决我的问题,将不胜感激,
谢谢。 :)
根据要求,我做了一个通用的解决方法,它将根据步长值添加点:
DEMO
检查上面的演示并更新这是否与您的要求相关。
目前正在使用 roundslider 插件 (http://roundsliderui.com/)。我已将值分成三份 (33) 并将工具提示更改为文本值。
我想在步骤所在的位置添加特定的图形点(例如圆圈)以指示用户将滑块拖动到的步骤。在文档中找不到任何与添加此功能相关的内容,所以只是想知道这是否可行,或者是否有人使用插件自己实现了此功能。
js:
$("#slider-text").roundSlider({
sliderType: "min-range",
editableTooltip: false,
width: 10,
handleSize: 27,
startAngle: 90,
radius: 91,
step: 33,
max: 99,
change: "updateBundle",
tooltipFormat: "changeTextsAndMinsTooltip"
});
function changeTextsAndMinsTooltip(e) {
var val = e.value, content;
if (val < 33) content = 0;
else if (val < 66) content = "10 or less";
else if (val < 99) content = "10 to 30";
else content = "30 or more";
return "<div>" + content + "<div>";
}
scss:
// Slider Styling
.rs-control {
.rs-range-color {
background-color: $green;
}
.rs-border {
border: none;
}
.rs-path-color {
background-color: #E0E0E0;
}
.rs-handle {
background-color: $green;
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
.rs-handle.rs-move {
cursor: pointer;
}
.rs-tooltip.rs-tooltip-text {
font-size: 19px;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
我最初的想法是使用滑块 div 上的 ::after
在台阶上添加圆圈。只是想知道是否有更强大的方法来实现这个。
如果有人能解决我的问题,将不胜感激, 谢谢。 :)
根据要求,我做了一个通用的解决方法,它将根据步长值添加点:
DEMO
检查上面的演示并更新这是否与您的要求相关。