EDIT: show customized slider value using Javascript

朱雀 2022-08-07 14:48 13阅读 0赞

Say if you really want to change the current value label for the slider to indicate a somewhat sophisticated value (date, transformed values etc.), you can write some small Javascript snippet to do that.

One example provided by the `jslider` control (which is what Shiny uses for your `sliderInput`) indicates that by calling the *constructor* of a slider with a `calculate` function, you can manually change the mapping from the current value (numeric) to a custom string (in this case, a date).

Without being too verbose, let's just say that the slider's Javascript object is called `slider`. Which you can always get by calling:

$(select).slider()

where `select` is a jQuery selector. Again, in this case it is `#foo` because the slider has an id `foo` set in `ui.R`.  When initiated, the `slider.settings.calculate` function appeared in the example will be bound to be the `slider.nice` function. So, we can simply override the `nice` function to achieve our goal.

Below is a modified `ui.R` with a piece of Javascript to do exactly the `nice` function overriding.

### ui.R ###

shinyUI(pageWithSidebar( headerPanel("renderImage example"), sidebarPanel( sliderInput("foo", "Animation duration", min = -30, max = 30, value = 0, step = 1, animate = animationOptions(loop = TRUE, interval = 1000)), dateInput("ana", "Choose a date:", value = as.Date("2014-07-01")) ), mainPanel( singleton(tags$head(HTML( ' <script type="text/javascript"> $(document).ready(function() { var slider = $("#foo").slider(); // override the default "nice" function. slider.nice = function(value) { var ref_date = new Date("2014-07-01"); // each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000); return [slider_date.getUTCFullYear(), slider_date.getUTCMonth() + 1, slider_date.getUTCDate()].join("-"); } }) </script> '))), # Use imageOutput to place the image on the page imageOutput("preImage") ) ))

Another detail we might want to tweak is the label on both ends of the slider. To achieve this we could:

1.  replace the entire `slider.domNode` by calling `slider.generateScales()`;
2.  directly modify the two `<span>`'s with class `jslider-label`.

For example if we take approach 2, we can modify the `HTML()` part of `ui.R` as:

singleton(tags$head(HTML( ' <script type="text/javascript"> $(document).ready(function() { var slider = $("#foo").slider(); // override the default "nice" function. var labels = slider.domNode.find(".jslider-label span"); labels.eq(0).text("2014-06-01"); labels.eq(1).text("2014-07-31"); slider.nice = function(value) { var ref_date = new Date("2014-07-01"); // each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000); return [slider_date.getUTCFullYear(), slider_date.getUTCMonth() + 1, slider_date.getUTCDate()].join("-"); } }) </script> '))),

And the labels will display the dates as expected.

This is of course some quick hacking and may not work if some other customization is made to the slider.

I think somehow the Shiny team should consider adding a `calculate` option in `sliderInput` which directly maps to `slider.settings.calculate`, just to make things like this easier.