标签: ion-range-slider

我正在使用ionRangeSlider,我希望为值分配标签,反之亦然.

所以用户可以通过选项从海滩选择距离:'on beach', '100m', '200m', '300m', 'more than 300m'但我需要post像这样的价值观'0', '100', '200', '300', 999

我的初学者:

$("#idSelector").ionRangeSlider({
    ...
    values_separator: " to ",
    values: [
        'on beach', '100m', '200m', '300m', 'more than 300m'
    ],
    ...

有办法吗？(使用ionRangeSlider因为获取值并解析它们我可以在途中)

我正在尝试使用ionRangeSlider的set min和maxoptions但它不起作用.

有任何想法吗？

我在其中一种表格中使用ionRangeslider来显示提示范围。

如何在提交按钮单击时更新值，以便在下次加载页面时显示具有该特定更新值的滑块？

HTML代码

<input type="text" class="exampleslider" id="exampleslider" name="tips">

并通过js调用ionRangeSlider

$('.exampleslider').ionRangeSlider({
  from: 0,
  to: 100,
  min: 0,
  grid: true,
  grid_num: 10,
  step: 10,
  postfix: '%',
});

输入有名称提示，我想通过这些提示通过数据库设置其值。

我正在尝试使用sliderInput. 感谢 Dean Atali 的回答（对数刻度上的闪亮滑块），我能够创建滑块。

不过，我需要建立在滑块server，并通过它传递给UIrenderUI和uiOutput。但是，当我在服务器端sliderInput进行renderUI呼叫时，它不再起作用。这里有两个示例：第一个显示分类滑块的工作原理（不使用renderUI/ 时uiOutput），第二个显示分类滑块的不起作用（使用renderUI/ 时uiOutput）。

工作示例（在 UI 中创建的滑块）

library(shiny)
JScode <-
  "$(function() {
setTimeout(function(){
var names = ['Unrated', 'Emerging', '&nbsp;',  'Formative', '&nbsp;', '&nbsp;', 'Developed', '&nbsp;'];
var vals = [];
for (i = 0; i < names.length; i++) {
var val = names[i];
vals.push(val);
}
$('#pvalue').data('ionRangeSlider').update({'values':vals})
}, 7)})"

runApp(shinyApp(
  ui = fluidPage(
    tags$head(tags$script(HTML(JScode))),
    textOutput('texty'),
    sliderInput("pvalue",
                "PValue:", …

如果我尝试将 ion range-slider 的默认颜色（可在此处获得：https : //github.com/IonDen/ion.rangeSlider）从红色（默认）更改为蓝色，如下所示：

.irs-slider.single {
    background: blue;
}

它变成正方形：

（最初它看起来像一条细红线： )

我究竟做错了什么？

演示

https://jsfiddle.net/chapkovski/xpvt214o/995048/

.irs-slider.single {
    background: blue;
}

$(".js-range-slider").ionRangeSlider({
        type: "single",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });

.irs-slider.single {
    background: blue;
}