calcite_slider: Create a Calcite Slider Component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Calcite Slider Component

Description

Creates a slider input for selecting numeric values. Supports both single-value and range selection (dual handles).

Usage

calcite_slider(
  id = NULL,
  value = NULL,
  min = 0,
  max = 100,
  step = 1,
  min_value = NULL,
  max_value = NULL,
  label_handles = NULL,
  label_ticks = NULL,
  label_text = NULL,
  ticks = NULL,
  disabled = NULL,
  required = NULL,
  scale = NULL,
  snap = NULL,
  precise = NULL,
  mirrored = NULL,
  fill_placement = NULL,
  histogram = NULL,
  histogram_stops = NULL,
  group_separator = NULL,
  page_step = NULL,
  min_label = NULL,
  max_label = NULL,
  name = NULL,
  form = NULL,
  numbering_system = NULL,
  status = NULL,
  validation_icon = NULL,
  validation_message = NULL,
  ...
)

Arguments

id	Component ID (required for Shiny reactivity)
value	Initial value (for single slider) or NULL
min	Minimum selectable value (default: 0)
max	Maximum selectable value (default: 100)
step	Increment step for up/down arrows and keyboard (default: 1)
min_value	For range sliders, the lower bound value
max_value	For range sliders, the upper bound value
label_handles	Whether to display numeric labels on handles (default: FALSE)
label_ticks	Whether to display numeric labels on tick marks (default: FALSE)
label_text	Accessible label text for the component
ticks	Interval for displaying tick marks on the number line
disabled	Whether the slider is disabled (default: FALSE)
required	Whether a value is required for form submission (default: FALSE)
scale	Size of the slider: "s" (small), "m" (medium), or "l" (large)
snap	Whether to enable snap-to-step on mouse interaction (default: FALSE)
precise	Whether to use finer positioning for handles (default: FALSE)
mirrored	Whether to mirror the slider (default: FALSE)
fill_placement	Where to display the fill: "start", "end", or "none"
histogram	A 2-column numeric matrix or data.frame for histogram display
histogram_stops	Color stops for histogram display
group_separator	Whether to display thousand separators in numbers (default: FALSE)
page_step	Interval to move with Page Up/Down keys
min_label	Accessible label for the minimum handle (for screen readers)
max_label	Accessible label for the maximum handle (for screen readers)
name	Name attribute for form submission
form	Associated form element ID
numbering_system	Numbering system to use: "arab", "arabext", or "latn"
status	Validation state: "idle", "valid", or "invalid"
validation_icon	Icon to display for validation feedback
validation_message	Message displayed for validation feedback
...	Additional attributes passed to the component

Details

Shiny Integration

The slider emits two types of events:

• calciteSliderChange - Fires when the user releases the handle (debounced, final value)

• calciteSliderInput - Fires continuously during drag (use with caution for expensive operations)

Available properties in input$id:

• ⁠$value⁠ - Current value (single slider) or array of ⁠[minValue, maxValue]⁠ (range slider)

• ⁠$min⁠ / ⁠$max⁠ - Slider bounds

• ⁠$step⁠ - Step increment

• ⁠$disabled⁠ - Whether disabled

• Other component properties

Single-value slider:

observeEvent(input$my_slider, {
  current_value <- input$my_slider$value
  print(paste("Slider value:", current_value))
})

Range slider (dual handles):

# Provide both min_value and max_value to create a range slider
calcite_slider(
  id = "range_slider",
  min = 0,
  max = 100,
  min_value = 20,
  max_value = 80
)

observeEvent(input$range_slider, {
  lower <- input$range_slider$minValue
  upper <- input$range_slider$maxValue
  print(paste("Range:", lower, "to", upper))
})

Update from server:

# Update single value
update_calcite("my_slider", value = 50)

# Update range
update_calcite("range_slider", minValue = 30, maxValue = 70)

Value

An object of class calcite_component

References

Official Documentation

Examples

# Basic slider
calcite_slider(
  id = "my_slider",
  value = 50,
  min = 0,
  max = 100,
  step = 5
)

# Slider with ticks and labels
calcite_slider(
  id = "temperature",
  value = 72,
  min = 32,
  max = 212,
  step = 1,
  ticks = 10,
  label_handles = TRUE,
  label_ticks = TRUE
)

# Range slider (dual handles)
calcite_slider(
  id = "price_range",
  min = 0,
  max = 1000,
  min_value = 100,
  max_value = 500,
  step = 10,
  label_handles = TRUE
)

# Shiny example
if (interactive()) {
  library(shiny)

  ui <- calcite_shell(
    calcite_card(
      heading = "Slider Example",
      calcite_label(
        "Choose a value",
        calcite_slider(
          id = "my_slider",
          value = 50,
          min = 0,
          max = 100,
          step = 5,
          label_handles = TRUE
        )
      ),
      verbatimTextOutput("slider_value")
    )
  )

  server <- function(input, output, session) {
    output$slider_value <- renderPrint({
      paste("Current value:", input$my_slider$value)
    })
  }

  shinyApp(ui, server)
}

calcite documentation built on March 3, 2026, 5:07 p.m.