标签: bootstrap-slider
如何获取滑块引导程序的值？
如何将滑块引导程序的值设置为隐藏的输入？
<input type="hidden" name="min_value" id="min_value" value="">
<input type="hidden" name="max_value" id="max_value" value="">
$(function() {
$( "#slider-range-s1" ).slider({
range: true,
min: 0,
max: 500,
value: [ 0, 500 ]
});
});
推荐指数
解决办法
查看次数
使用带有jQuery UI的bootstrap-slider
我想在jQuery UI中使用bootrap-slider.我在加载Bootstrap CSS和jQuery后遵循文档并加载了插件代码.
但是,滑块未初始化 - <input>保持原样,我在浏览器控制台中看不到任何错误.
以下是代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./slider/bootstrap-slider.css" media="all" />
<script src="./slider/bootstrap-slider.js"></script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
<script type="text/javascript">
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
</script>
</body>
你能告诉我有什么问题吗？
javascript jquery jquery-ui twitter-bootstrap bootstrap-slider
推荐指数
解决办法
查看次数
chart.redraw()在设置事件行后无法正常工作
我正在使用morris.js图表以及bootstrap滑块.
我想做的事:
如果移动滑块,我想在滑块值的位置插入一个事件线到图表中.没什么特别的.
问题:
设置事件后图表没有重绘.插入新数据时,将自动重绘图表.所以我尝试通过将现有数据再次传递给图表来刷新(以检查正确的语法),如下所示:
chart.setData(chart.options.data);
这很有效!新事件将被绘制到图表中.不幸的是,由于图表正在重绘所有数据,因此效果不佳.
文件说有chart.redraw().这对我不起作用.也许有人可以找出原因.
只需运行代码段并切换单选按钮以测试这两种方法,您就会看到问题所在.
// Chart creation - not interesting
var chart = new Morris.Line({
element: 'chart',
ymin: 0,
ymax: 100,
gridIntegers: true,
parseTime:false,
// Will be set below
data: [ ],
xkey: 'position',
ykeys: ['value'],
labels: ['Value'],
hideHover: "always",
pointSize: 0,
continuousLine: false,
goalStrokeWidth: 3,
axes: true,
grid: true,
numLines: 6,
eventLineColors: [ "red" ],
smooth: true
});
// Inserting some values
var values = [101]
for(i = 1; i <= …推荐指数
解决办法
查看次数
滑块工具提示的重叠部分以及他在bootstrap-slider插件中的位置
我在模态窗口中使用Twitter Bootstrap 2.3.2和bootstrap-slider插件.问题是滑块的工具提示的一部分重叠在模态窗口的标题后面并且位置错误.
我试图添加此规则,但它没有帮助.
.slider .tooltip{
z-index: 1151 !important;
}
我想提供正确的jsfiddle,但我无法找到bootstrap-slider插件cdn.这是jsfiddle,它不起作用,因为缺少bootstrap-slider插件源.
HTML
<a href="#options" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="options" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
Vertex size <input id="nodeSize" data-slider-id='nodeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br><br>
Edge size <input id="edgeSize" data-slider-id='edgeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" id="saveSettings">Save</button>
</div>
</div>
JavaScript的
$(document).ready(function () {
$('#nodeSize').slider({
formatter: function(value) {
return …css jquery twitter-bootstrap twitter-bootstrap-2 bootstrap-slider
推荐指数
解决办法
查看次数
Rails 4 - Bootstrap Slider - 在数据滴答上动态填充工具提示？
我正在尝试在我的Rails 4应用程序中使用引导滑块.
我试图使用的功能在bootstrap-slider-rails gem文档中的示例中显示.
我正在尝试根据数据滑块值动态填充工具提示文本.
在我看来,我有:
<input id="ex13" type="text" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>
然后在我的js文件中,我有:
jQuery(document).ready(function(){
$("#ex13").bootstrapSlider({
ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
ticks_snap_bounds: 30,
orientation: 'vertical',
tooltip_position: 'left',
enabled: false
});
});
我有一个名为TRL的模型.该表具有称为级别(整数)和描述(文本)的属性.
数据滑块值现在显示trl.level.这部分工作正常,但我无法弄清楚如何使格式化程序功能工作.
我可以从文档中看到,formatter参数不能作为数据属性传递.
我尝试将它添加到js方法,
$("#ex13").bootstrapSlider({
ticks: [ 10, 20, 30, 40, …javascript jquery ruby-on-rails twitter-bootstrap bootstrap-slider
推荐指数
解决办法
查看次数
如何更改引导程序滑块中选定部分的颜色
嗨，我正在使用相同的应用程序，该应用程序在引导程序滑块中的选定部分的更改颜色链接之一中进行了演示。即使在我使用相同的之后，我也无法继续。你能不能看看并让我知道我犯了错误的解决方案。我已将必要的 .js 和 .css 文件下载到我的系统中，并在我的 html 页面中引用它们。这个滑块我用于反馈类型。很少有问题会跟随从 1 到 10 的 10 个选项。当用户选择 1 到 5 时，滑块应该显示“红色”（OK），当它在 6 到 8 之间时显示“橙色”（好）和 9 到 10 “绿色”（优秀）。请找到我下面的代码并帮助我。提前致谢
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-slider.js"></script>
<link href="js/bootstrap-slider.css" rel="stylesheet">
<link href="js/bootstrap.min.css" rel="stylesheet">
<style>
#score .slider-selection {
background: yellow;
}
</style>
<script>
var r = $('#score').slider()
.on('slideStart', RGBChange)
.data('slider');
var RGBChange = function() {
alert("called");
if(r.getValue() >= 1 && r.getValue() <=5 ){
$('.slider-selection').css('background', 'red');
document.getElementById("lbl").value = r.getValue();
}
else if(r.getValue() > 5 && r.getValue() <=8 ){ …推荐指数
解决办法
查看次数
不规则的自举滑块步长值
我正在使用bootstrap滑块http://seiyria.com/bootstrap-slider/ 我想选择不规则的步骤值,如14,90,360天.
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-step="1" data-slider-value="14" data-slider-ticks="[14, 90, 360]"
data-slider-ticks-labels='["14 days", "90 days", "1 year"]'
/>
var r = $('#ex1').slider()
.on('slide', function(data){
$("#ex6SliderVal").text(data.value)
})
;
任何建议如何只选择那些定义的值14,90,360等.
推荐指数
解决办法
查看次数
如何在Bootstrap-Slider中将工具提示设置为文本字符串与刻度值
我想知道是否有可能覆盖tick valuesBootstrap-Slider（发布时最新的v9.7.2），使其成为文本字符串而不是tick值。
在下面的屏幕快照中，刻度值“ 2”出现在滑块上最后一个选择元素的上方。我希望能够代替出现“说”这个词。那可能吗？
这是我的HTML：
<div class="form-group">
<label class="col-md-4 control-label" for="language_french">French</label>
<div class="col-md-4">
<input id="language_french" type="text" data-provide="slider"
data-slider-ticks="[0, 1, 2]"
data-slider-min="0"
data-slider-max="2"
data-slider-step="1"
data-slider-value="0"
data-slider-tooltip="show"
/>
</div>
</div>
这是我的jQuery / JavaScript：
<script>
// https://github.com/seiyria/bootstrap-slider
var slider_002 = new Slider( '#language_french' );
</script>
已对@Seiyria的每个答案进行了修改...但它仅适用于法语实例。没有其他语言实例起作用：
<script>
// https://github.com/seiyria/bootstrap-slider
var values = ['None', 'Read', 'Speak'];
var formatter = (index) => values[index];
new Slider( '#language_english' );
new Slider( '#language_french', { formatter } );
new Slider( '#language_italian', { formatter } );
new Slider( …推荐指数
解决办法
查看次数