Javascript 带标签的垂直范围滑块

要生成带标签的垂直范围滑块

修饰-

它显示不带标签的基于垂直方向的滑块

“需要带标签的滑块”

---

我尝试修改了这个库，但它无法生成标签。

为什么不使用这个插件？我添加了一些html+css；）

$（函数（）{
设$document=$（document）；
让选择器=“[数据范围滑块]”；
设$element=$（选择器）；
//为ie8提供支持
让textContent=（'textContent'在文档中）？'textContent'：'innerText'；
//演示价值反馈的示例功能
函数值输出（元素）{
设value=element.value；
让output=element.parentNode.getElementsByTagName（'output'）[0]| | element.parentNode.parentNode.getElementsByTagName（'output'）[0]；
输出[文本内容]=值；
}
$document.on（'input'，'input[type=“range”]，'+选择器，函数（e）{
价值输出（如目标）；
});
//演示禁用功能的示例功能
$document.on（'click'，'#js示例禁用按钮[data behavior=“toggle”]”，函数（e）{
让$inputRange=$（选择器，e.target.parentNode）；
如果（$inputRange[0]。已禁用）{
$inputRange.prop（'disabled'，false）；
}否则{
$inputRange.prop（'disabled'，true）；
}
$inputRange.RangeSlaider（'update'）；
});
//演示编程值更改的示例功能
$document.on（'click'，'js示例更改值按钮'，函数（e）{
让$inputRange=$（选择器，e.target.parentNode）；
让value=$（'input[type=“number”]”，e.target.parentNode）[0]。value；
$inputRange.val（value.change（）；
});
//演示编程属性更改的示例功能
$document.on（'click'，'js示例更改属性按钮'，函数（e）{
让$inputRange=$（选择器，e.target.parentNode）；
让属性={
最小值：$（'input[name=“min”]”，e.target.parentNode）[0]。值，
max:$（'input[name=“max”]”，e.target.parentNode）[0]。值，
步骤：$（'input[name=“step”]”，e.target.parentNode）[0]。值
};
$inputRange.attr（属性）；
$inputRange.RangeSlaider（'update'，true）；
});
//演示销毁功能的示例功能
$document
.on（'click'，'#js示例销毁按钮[data behavior=“destroy”]'，函数（e）{
$（选择器，e.target.parentNode）.RangeSloider（'destroy'）；
})
.on（'click'，'#js示例销毁按钮[data behavior=“initialize”]'，函数（e）{
$（选择器，e.target.parentNode）.范围滑块({
polyfill:错误
});
});
//测试隐藏元素初始化的示例功能
$document
.on（'click'，'#js示例隐藏按钮[data behavior=“toggle”]'，函数（e）{
让$container=$（e.target.previousElementSibling）；
$container.toggle（）；
});
//基本范围滑块初始化
$element.rangeslider({
//停用特征检测
polyfill:false，
//回调函数
onInit（）{
valueOutput（此.$元素[0]）；
},
//回调函数
滑动（位置、值）{
console.log（'onSlide'）；
console.log（'位置：'+position，'值：'+value）；
},
//回调函数
滑动端（位置、值）{
console.log（'onslidend'）；
console.log（'位置：'+position，'值：'+value）；
}
});
});
*，
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html{
颜色：#404040；
字体系列：Helvetica、arial、无衬线字体；
}
身体{
填充：50px 20px；
保证金：0自动；
最大宽度：800px；
}
输出{
显示：块；
字体大小：30px；
字体大小：粗体；
文本对齐：居中；
利润率：30px0；
宽度：100%；
}
.集装箱{
宽度：200px；
保证金：自动；
}
u左{
浮动：左；
}
u-cf：之前，
u-cf：之后{
内容：“；
显示：表格；
}
u-cf：之后{
明确：两者皆有；
}
.u-text-left{
文本对齐：左对齐；
}
.标签{
位置：相对位置；
字号：700；
}
.标签中心{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
最高：5%；
左：-50px；
身高：90%；
}

data orientation=“vertical”
100
75
50
25
0