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 myserver
- 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 as1000.000000000002
. I don't know how to deal with that.EDIT
I have not found how to get HTML pips values with the help of the
format
option. Here is a way to get10^x
with superscripts:That is, the full JS code is:
EDIT 2
Here is an app which deals with the case when
min
,max
andvalue
are reactive values. The idea is to avoidrenderUI
: the app starts with an initial slider and these three values are updated by Javascript, with the help of theupdateOptions
method.