Javascript 将标签自定义为垂直noUiSliderInput中的指数文本格式

我正在我的应用程序中使用垂直

noUiSliderInput

我想将

noUiSliderInput

的

pips

中定义的标签从常规数字替换为

10^x

的文本字符串，其中x是原始标签

滑块具有以下属性（一些背景信息）：

• 它在我的

  服务器中构建为
  uiOutput

• 它是线性的，但紧邻对数

  ggplot

  。因此，如果我的实际数据的范围是0.1（10^-1）到1000（10^-3），我让滑块的值实际上是从-1到3运行的“幂数”
• 这样，线性滑块可以跟随对数图
• 最小值和最大值取决于用户从

  选择输入

  菜单打开的数据文件中的值范围，该菜单加载文件，计算滑块的新最小值和最大值，并使其重新渲染

我知道这很可能是通过javascript实现的，但到目前为止，我的尝试都没有产生任何效果

我在这里看到了一个常规滑块用单词替换标签的示例，但将10改为幂上标是另一回事，到目前为止，我还无法用该示例针对noUislider

服务器文件

server <- function(input, output, session) {
  values <- reactiveValues( 
    minimum = 1
  )

  observeEvent(input$Button1, { 
    values$minimum <- sample(1:5, 1)
  })

  observe({ values$maximum <- values$minimum + 5})

  output$sliderout <- renderUI({ 
    noUiSliderInput(
      inputId = "YOUR_SLIDER_ID", 
      label = "Slider vertical:",
      min = values$minimum, 
      max = values$maximum,
      step = 0.1,
      value = values$minimum,
      orientation = "vertical",
      pips = list(
        mode = "range",
        density = 10
      ),
      width = "100px", height = "300px"
    )})
  output$res2 <- renderPrint(input$noui2)
}

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
 # includeScript("slider.js"), ## line to open file with javascript

  tags$br(),
  div(class = 'myslider', uiOutput('sliderout')),
  actionButton(inputId = 'Button1', label = 'Change slider'),
  verbatimTextOutput(outputId = "res2")
)

---

server这就是我努力实现的目标。只有一个问题：
1000
呈现为
1000.000000000002
。我不知道该怎么处理

library(shiny)
library(shinyWidgets)
library(shinyjs)

js <- paste(
  "var slider = document.getElementById('noui').noUiSlider;",
  "slider.updateOptions({", 
  "  format: wNumb({", 
  "    encoder: function(x){return Math.pow(10,x);}", 
  "  })", 
  "});",
  "slider.pips({",
  "  mode: 'range',", 
  "  density: 2,", 
  "  format: {", 
  "    to: function(x){return '10^' + x;}",
  "  }",
  "});",
  sep = "\n"
)

ui <- fluidPage(
  useShinyjs(),
  tags$br(),

  noUiSliderInput(
    inputId = "noui", label = "Slider vertical:",
    min = -2, max = 4, step = 1,
    value = 0, margin = 100,
    orientation = "vertical", 
    width = "300px", height = "300px"
  ),

  verbatimTextOutput(outputId = "res")

)

server <- function(input, output, session) {

  output$res <- renderPrint(input$noui)

  observeEvent(input$noui, {
    runjs(js)
  }, once = TRUE)

}

shinyApp(ui, server)

也就是说，完整的JS代码是：

js <- paste(
  "var slider = document.getElementById('noui').noUiSlider;",
  "slider.updateOptions({", 
  "  format: wNumb({", 
  "    encoder: function(x){return parseFloat(Math.pow(10,x).toPrecision(2));}", 
  "  })", 
  "});",
  "slider.pips({",
  "  mode: 'range',", 
  "  density: 2", 
  "});",
  "var pipsValues = $('.noUi-value');",
  "pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});",
  sep = "\n"
)

“我不知道如何处理这个问题”-也许是，非常酷的Stephane。我设法解决了您遇到的问题（纯属运气，因为我几乎不懂javascript。“编码器：函数（x）{return parseFloat（Math.pow（10，x）.toFixed（2））；}”，也在考虑这是否可能，但无法解决：document.write（下标：“+txt.sub（）+”
”），以应用于标签，而不是输出10^4“to:function（x）{returndocument.write（'10'+''+x+''；}”），这会生成上标，但会破坏其余的output@Mark我试图放置上标，未成功。我将重试。对于舍入，您也可以使用
toPrecision
而不是
toFixed
（我更喜欢这个示例）。
js <- paste(
  "var slider = document.getElementById('noui').noUiSlider;",
  "slider.updateOptions({", 
  "  format: wNumb({", 
  "    encoder: function(x){return parseFloat(Math.pow(10,x).toPrecision(2));}", 
  "  })", 
  "});",
  "slider.pips({",
  "  mode: 'range',", 
  "  density: 2", 
  "});",
  "var pipsValues = $('.noUi-value');",
  "pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});",
  sep = "\n"
)

library(shiny)
library(shinyWidgets)
library(shinyjs)

js <- function(Min, Max, Start){
  sprintf(paste(
    "var slider = document.getElementById('noui').noUiSlider;",
    "slider.updateOptions({",
    "  start: %s,",
    "  range: {min: %s, max: %s},",
    "  format: wNumb({", 
    "    encoder: function(x){return parseFloat(Math.pow(10,x).toPrecision(2));}", 
    "  })", 
    "});",
    "var pipsValues = $('.noUi-value');",
    "pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});",
    sep = "\n"
  ), Start, Min, Max)
}

ui <- fluidPage(
  useShinyjs(),

  actionButton("btn", "Sample"),

  tags$br(),

  noUiSliderInput(
    inputId = "noui", label = "Slider vertical:",
    min = -2, max = 4, step = 1,
    value = 0, margin = 100, 
    pips = list(mode="range", density=2),
    orientation = "vertical", 
    width = "300px", height = "300px", 
    behaviour = "tap"
  ),

  verbatimTextOutput(outputId = "res")

)

server <- function(input, output, session) {

  Values <- eventReactive(input$btn, {
    Min <- sample(-5:5, 1)
    Max <- Min + 6
    Start <- sample(Min:Max, 1)
    list(min = Min, max = Max, start = Start)
  }, ignoreNULL = FALSE)

  observe({
    if(!is.null(input$noui)){
      values <- Values()
      runjs(js(values$min,values$max,values$start))
    }
  })

  output$res <- renderPrint(input$noui)

}

shinyApp(ui, server)