In this article, we discuss how to create a slider in an R Shiny application. We demonstrate how to make a simple slider as well as more complicated sliders.
A slider is a widget that provides a set of predefined values from which the user can select single values or a range of values. Subsequently, the selected values can be used as input for other processes. For example, filtering data or defining the number of tries in an experiment. But, how do you create a slider?
You create a slider for an R Shiny application with the sliderInput widget. This widget lets you define the basic characteristics of the slider, such as the minimum and maximum value, the default value, and the type of slider. Also, by providing additional arguments, you can make animated sliders and set formats.
After reading this article, you will understand how to make the following sliders.
- A basic slider
- A slider with a special step size
- A slider with decimals
- A range slider
- An animated slider
- A formatted slider
- A slider with a reset button
In separate articles, we demonstrate how to create sliders that work with dates, sliders that have characters instead of numbers, as well as (multi) dependent sliders.
How to Create a Basic Slider in R Shiny
The first slider you probably want to create in your Shiny application is a basic slider.
A basic slider lets the user select one integer value that falls between the boundaries of a predefined minimum and a maximum value (both inclusive). By default, the interval between two selectable values is one.
For example:
You create a standard slider in R Shiny with the sliderInput widget (or function). In order to make this slider work, you need to define the following 5 arguments:
- inputId: The reference of the slider to access the selected value.
- label: The text for the label/title of the slider. You use NULL to omit the label.
- min: The minimum value of the slider.
- max: The maximum value of the slider.
- value: The default value of the slider.
The following code snippet creates a slider that lets the user select one value between 0 and 10, with a default value of 5. It also creates a text box that prints the selected value.
library(shiny)
ui <- fluidPage(
# 1. A Basic Slider
sliderInput(
inputId = "Slider1",
label = "Basic Slider",
min = 0,
max = 10,
value = 5
),
verbatimTextOutput("Slider1Out")
)
server <- function(input, output){
output$Slider1Out <- renderText({
paste("You've selected: ", input$Slider1)
})
}
shinyApp(ui, server)In the example above, both the minimum value and the maximum value were positive. However, you can also create sliders with negative values. In order to do so, you just set the minimum (and maximum) value of the slider to a negative value. Moreover, you can also use the value=-argument to create a negative default value.
How to Set the Step Size of a Slider
After creating a basic slider, the next step is to define the step size.
The step size is the interval between two selectable values and can be integers or decimals. For instance, 1, 10, or 0.5. By default, the step size is one, which is bothersome if the range of values between the minimum and the maximum is large, but the selectable values are limited. In such cases, defining a step size is convenient.
You can define the step size of a Shiny slider with the step=-argument of the sliderInput widget. To do so, you use the step=-argument followed by the desired step size. While using this argument, you can use integers and decimals to set the intervals between two selectable values.
For example, the slider below allows the user to select a value between 0 and 100 in steps of 10.
The snippet below contains the R code to create this slider with a step size of 10.
library(shiny)
ui <- fluidPage(
# 2. A Basic Slider with Step Size
sliderInput(
inputId = "Slider2",
label = "Basic Slider with a Step Size of 10",
min = 0,
max = 100,
value = 10,
step = 10
),
verbatimTextOutput("Slider2Out")
)
server <- function(input, output){
output$Slider2Out <- renderText({
paste("You've selected: ", input$Slider2)
})
}
shinyApp(ui, server)How to Create a Slider with Decimals
So far, the sliders we’ve created allowed the user to select an integer value. However, you might want to create a slider where one can pick a decimal value, e.g., 0.5 or 3.14.
You create a Shiny slider with decimals by using the step=-argument of the sliderInput widget. By setting the right steps, you automatically create a decimal slider. For example, if you use step=0.5, then the selectable values will have one decimal and the user can pick the values (0.5, 1.0, 1.5, etc.).
The R code below creates a slider where the user can select values between 0 and 5 in steps of 0.25. Hence, a slider with two decimals.
library(shiny)
ui <- fluidPage(
# 3. A Basic Slider with Decimals
sliderInput(
inputId = "Slider3",
label = "Basic Slider with Decimals",
min = 0,
max = 5,
value = 3.75,
step = 0.25
),
verbatimTextOutput("Slider3Out")
)
server <- function(input, output){
output$Slider3Out <- renderText({
paste("You've selected: ", input$Slider3)
})
}
shinyApp(ui, server)Instead, if you only want to change the appearance of the values of the slider, e.g., 3.00 rather than 3, then you should check out the article about “How to Style a Slider”.
How to Create a Range Slider
Until now, we’ve demonstrated how to create a slider where the user can pick one value. However, sliders that allow users to select two values are extremely useful. For example, to filter observations from a data set whose values fall within a specific range.
You create a range slider for your R Shiny app by using the values=-argument of the sliderInput widget. Normally, this argument defines one default value of the slider. However, by using a vector of two values, you specify a lower bound and upper bound. Hence, you create a range slider.
For example, by using value=c(3.5), you create a range slider whose default values are 3 and 5.
Once you’ve set the default value of the range slider, you can move the lower and upper bound independently, or all together. So, you can increase or decrease the range of values.
The following R code creates a simple range slider.
library(shiny)
ui <- fluidPage(
# 4. A Basic Slider with a Range
sliderInput(
inputId = "Slider4",
label = "Range Slider",
min = 0,
max = 10,
value = c(3,5),
step = 1
),
verbatimTextOutput("Slider4Out")
)
server <- function(input, output){
output$Slider4Out <- renderText({
paste0("You've selected the range: ", input$Slider4[1], " to ", input$Slider4[2])
})
}
shinyApp(ui, server)By definition, range sliders let you pick two values instead of one. Therefore, accessing the selected values of a range slider differs from retrieving the selected value of a normal slider.
Normally, you fetch the selected value of a normal slider with the following code.
# Retrieve a single value: input$<inputId>
However, to retrieve the minimum and maximum selected value from a range slider, you must use an index. For example:
# Retrieve the minimum value: input$<inputId>[1] # Retrieve the maximum value: input$<inputId>[2]
The <inputId> represents the value of the argument in the sliderInput widget. For example, “Slider4” in the code above.
How to Create an Animated Slider
So far, all the sliders we’ve discussed are static. In other words, the value only changes when the user moves the slider. However, you can also create an animated slider for your Shiny application.
An animated slider is a slider where the picked value changes automatically when you press the start/stop button. Such sliders are useful when you want to create a graph that shows different results without a user that constantly changes the slider.
But, how do you create an animated slider?
You create an animated slider for a Shiny app with the animate=-argument from the sliderInput widget. This argument uses the animationOptions() function which defines the characteristics of the animated slider.
You can define the following elements:
- interval: The number of milliseconds between each step of the animation.
- loop: A TRUE/FALSE argument to specify whether the animation restarts automatically. Set to FALSE by default.
- playButton: Defines the appearance of a play button. Set to NULL by default.
- pauseButton: Same as playButton, but for a pause button. Set to NULL by default.
Although the default value of both the playButton=-argument and the pauseButton=-argument is NULL, a simple play/pause button is shown at the right-bottom corner.
The code below shows an example of how to create an animated slider. The slider updates the selected value every 0.5 seconds and restarts automatically when it reaches the maximum value.
library(shiny)
ui <- fluidPage(
# 5. An Animated Slider
sliderInput(
inputId = "Slider5",
label = "5. Animated Slider",
min = 0,
max = 10,
value = 1,
step = 1,
animate = animationOptions(interval = 500, loop = TRUE)
),
# Starts the animation directly after loading the Shiny app
tags$script("$(document).ready(function(){
setTimeout(function() {$('.slider-animate-button').click()},10);
});"),
verbatimTextOutput("Slider5Out")
)
server <- function(input, output){
output$Slider5Out <- renderText({
paste0("You've selected: ", input$Slider5)
})
}
shinyApp(ui, server)By default, the user needs to click the play button to start the animated slider. However, with some simple javascript code, you can start the slider automatically when the page has been loaded. This is shown above. You can remove this code if you prefer the default behavior.
As a final note on animated sliders, you could set the step=-argument to -1 in an attempt to move the slider from right to left. However, animated sliders progress always from left to right and increase the selected value.
Animated sliders work both for simple sliders, as well as for range sliders.
How to Format a Slider
By default, Shiny sliders are blue and the selected value is represented by a circle. However, you can control the appearance of the slider with the setSliderColor widget or with the Shiny theme.
Although the setSliderColor widget provides the most flexibility, the standard slider widget provides also some options.
The sliderInput widget offers some customization options. For example, you can add a prefix and suffix to the slider with the pre=-argument and the post=-argument, respectively. If necessary, you can use both options at the same time.
The pre=-argument and the post=-argument are especially useful when you want to add currency symbols or a percentage sign to the slider.
To add a pre- or suffix, you start with the pre or post keyword, followed by the equal sign, and finally the desired value between (double) quotes. For example, post=”%” to add the percentage sign to the slider.
library(shiny)
ui <- fluidPage(
# 6A. A Formatted Slider I
sliderInput(
inputId = "Slider6A",
label = "6a. Fromatted Slider I",
min = -10,
max = 10,
value = 0,
step = 1,
post = "%"
),
verbatimTextOutput("Slider6AOut")
)
server <- function(input, output){
output$Slider6AOut <- renderText({
paste0("You've selected: ", input$Slider6A, "%")
})
}
shinyApp(ui, server)Instead of the suffix, you can also add a prefix. For example, the slider below uses the pre=”$” argument to add the dollar sign to the slider.
library(shiny)
ui <- fluidPage(
# 6B. A Formatted Slider II
sliderInput(
inputId = "Slider6B",
label = "6b. Fromatted Slider II",
min = 0,
max = 1000,
value = 100,
step = 100,
pre = "$"
),
verbatimTextOutput("Slider6BOut")
)
server <- function(input, output){
output$Slider6BOut <- renderText({
paste0("You've selected: $", input$Slider6B)
})
}
shinyApp(ui, server)How to Create a Shiny Slider with a Reset Button
By default, the user can pick a value so that some graph, table, or other object is updated automatically. However, the sliderInput widget does not offer the possibility to add a reset button.
Nevertheless, with some lines of extra code, you can add a button to set the selected value to the default value.
You create a reset button in your Shiny application by adding 3 additional widgets/functions to your code:
- The actionButton widget: This widget creates a clickable button. You must define the placeholder of the button (e.g., resetBtn) and the text that is displayed by the button (e.g., Reset).
- The observeEvent function: This function constantly scans if the user clicks the button.
- The updateSliderInput widget: This widget allows you to update the value of a widget. For example, set a slider to its default value.
By placing the updateSliderInput within the observeEvent function, the value of the slider is only reset when the user clicks the button.
This is an example of the slider with a reset button.
The following snippet shows how to create a reset button that changes the value of the slider back to 5.
library(shiny)
ui <- fluidPage(
# 7. Slider with Reset Button
sliderInput(
inputId = "Slider7",
label = "7. Slider with Reset Button",
min = 0,
max = 10,
value = 5
),
verbatimTextOutput("Slider7Out"),
actionButton("resetBtn", "Reset")
)
server <- function(input, output){
output$Slider7Out <- renderText({
paste("You've selected: ", input$Slider7)
})
observeEvent(input$resetBtn, {
updateSliderInput(inputId = "Slider7", value = 5)
})
}
shinyApp(ui, server)In this example, we reset only one slider. However, you can use one button to reset multiple sliders by adding more updateSliderInput widgets to the observeEvent function.
For more information about Shiny slider, see the official documentation.
