I'm using a vertical noUiSliderInput
in my app
I would like to replace the labels, defined in pips
of noUiSliderInput
from regular numbers to text strings that are 10^x
, where x is the original label.
The slider has the following properties (some background info):
- It is build as
uiOutput
in my server
- It is linear, but is next to a logarithmic
ggplot
. Therefore I made the sliders values actually the "power numbers" to run from for instance -1 to 3 if my actual data has a range of 0.1 (10^-1) to 1000 (10^3).
- This way the linear slider can follow the logarithmic plot
- min and max depend on the range of values in the datafile the user opens from a
selectInput
menu, which loads the file, and calculates new min and max for the slider, and causes it to rerender.
I know it should most likely be achieved with javascript, but so far my attempts don't even come close to have any effect.
I saw this example here for a regular slider to replace the label with words, but changing to 10 to the power superscript is another story, and I am so far unable to target the noUislider with the example. SO question
SERVER File
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)
}
UI file
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")
)
This is what I've managed to achieve. There's only one problem: 1000
is rendered as 1000.000000000002
. I don't know how to deal with that.
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)
EDIT
I have not found how to get HTML pips values with the help of the format
option. Here is a way to get 10^x
with superscripts:
var pipsValues = $('.noUi-value');
pipsValues.each(function(){$(this).html('10<sup>'+$(this).attr('data-value')+'</sup>')});
That is, the full JS code is:
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"
)
EDIT 2
Here is an app which deals with the case when min
, max
and value
are reactive values. The idea is to avoid renderUI
: the app starts with an initial slider and these three values are updated by Javascript, with the help of the updateOptions
method.
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)