Slider {shiny.fluent} | R Documentation |
Slider
Description
A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.
For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.
Usage
Slider(...)
Slider.shinyInput(inputId, ..., value = defaultValue)
updateSlider.shinyInput(
session = shiny::getDefaultReactiveDomain(),
inputId,
...
)
Arguments
... |
Props to pass to the component. The allowed props are listed below in the Details section. |
inputId |
ID of the component. |
value |
Starting value. |
session |
Object passed as the |
Details
-
ariaLabel
string
A description of the Slider for the benefit of screen readers. -
ariaValueText
(value: number) => string
A text description of the Slider number value for the benefit of screen readers. This should be used when the Slider number value is not accurately represented by a number. -
buttonProps
React.HTMLAttributes<HTMLButtonElement>
Optional mixin for additional props on the thumb button within the slider. -
className
string
Optional className to attach to the slider root element. -
componentRef
IRefObject<ISlider>
Optional callback to access the ISlider interface. Use this instead of ref for accessing the public methods and properties of the component. -
defaultValue
number
The initial value of the Slider. Use this if you intend for the Slider to be an uncontrolled component. This value is mutually exclusive to value. Use one or the other. -
disabled
boolean
Optional flag to render the Slider as disabled. -
label
string
Description label of the Slider -
max
number
The max value of the Slider -
min
number
The min value of the Slider -
onChange
(value: number) => void
Callback when the value has been changed -
onChanged
(event: MouseEvent | TouchEvent | KeyboardEvent, value: number) => void
Callback on mouse up or touch end -
originFromZero
boolean
Optional flag to attach the origin of slider to zero. Helpful when the range include negatives. -
showValue
boolean
Whether to show the value on the right of the Slider. -
snapToStep
boolean
Optional flag to decide that thumb will snap to closest value while moving the slider -
step
number
The difference between the two adjacent values of the Slider -
styles
IStyleFunctionOrObject<ISliderStyleProps, ISliderStyles>
Call to provide customized styling that will layer on top of the variant rules. -
theme
ITheme
Theme provided by High-Order Component. -
value
number
The initial value of the Slider. Use this if you intend to pass in a new value as a result of onChange events. This value is mutually exclusive to defaultValue. Use one or the other. -
valueFormat
(value: number) => string
Optional function to format the slider value. -
vertical
boolean
Optional flag to render the slider vertically. Defaults to rendering horizontal.
Value
Object with shiny.tag
class suitable for use in the UI of a Shiny app.
The update functions return nothing (called for side effects).
Best practices
Layout
Don't use a slider for binary settings.
Don't use a continuous slider if the range of values is large.
Don't use for a range with fewer than three values.
Sliders are typically horizontal but can be vertical, when needed.
Content
Include a label indicating what value the slider changes.
Use step points if you don't want the slider to allow arbitrary values between minimum and maximum.
Examples
library(shiny)
library(shiny.fluent)
ui <- function(id) {
ns <- NS(id)
div(
Slider.shinyInput(ns("slider"), value = 0, min = -100, max = 100),
textOutput(ns("sliderValue"))
)
}
server <- function(id) {
moduleServer(id, function(input, output, session) {
output$sliderValue <- renderText({
sprintf("Value: %s", input$slider)
})
})
}
if (interactive()) {
shinyApp(ui("app"), function(input, output) server("app"))
}