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 can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Slider(...)

Slider.shinyInput(inputId, ..., value = defaultValue)

updateSlider.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

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.

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.

valueFormat

(value: number) => string
Optional function to format the slider value.

vertical

boolean
Optional flag to render the slider vertically. Defaults to rendering horizontal.

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.fluent)

if (interactive()) {
  shinyApp(
    ui = div(
      Slider.shinyInput("slider", value = 42, min = -100, max = 100),
      textOutput("sliderValue")
    ),
    server = function(input, output) {
      output$sliderValue <- renderText({
        sprintf("Value: %s", input$slider)
      })
    }
  )
}