diff --git a/scripts/htmlDependencies.R b/scripts/htmlDependencies.R
index fd1ebdaa1..a432a8ef3 100755
--- a/scripts/htmlDependencies.R
+++ b/scripts/htmlDependencies.R
@@ -134,6 +134,21 @@ shiny_theme <- bslib::bs_theme(version = 5, preset = "shiny")
# Save iorange slider dep
# Get _dynamic_ ionrangeslider dep
ion_dep <- shiny:::ionRangeSliderDependencyCSS(shiny_theme)
+ion_dep_css <- fs::path(ion_dep$src$file, ion_dep$stylesheet)
+# Preset="shiny" additional ionRangeSlider rules
+ion_preset_rules <- system.file("builtin", "bs5", "shiny", "ionrangeslider", "_rules.scss", package = "bslib")
+ion_preset_compiled <-
+ sass::sass_partial(
+ readLines(ion_preset_rules),
+ shiny_theme,
+ write_attachments = FALSE,
+ cache = FALSE
+ )
+# Append preset styles to the base ionRangeSlider CSS
+cat(
+ c("\n\n/* shiny preset styles */\n\n", ion_preset_compiled),
+ file = ion_dep_css, sep = "\n", append = TRUE
+)
if (inherits(ion_dep, "html_dependency")) {
ion_dep <- list(ion_dep)
}
diff --git a/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css b/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css
index 8bd3f34bc..9decf1b46 100644
--- a/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css
+++ b/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css
@@ -290,3 +290,69 @@
.irs--shiny .irs-grid-pol.small {
background-color: transparent;
}
+
+
+/* shiny preset styles */
+
+
+/*-- scss:defaults --*/
+.irs.irs--shiny {
+ margin-top: 3px;
+}
+
+.irs.irs--shiny .irs-min,
+.irs.irs--shiny .irs-max,
+.irs.irs--shiny .irs-from,
+.irs.irs--shiny .irs-to,
+.irs.irs--shiny .irs-single {
+ padding: 3px 6px;
+ top: -3px;
+}
+
+.irs.irs--shiny .irs-handle {
+ top: 23px;
+}
+
+.irs.irs--shiny .irs-bar {
+ top: 31px;
+ height: 3px;
+ border: none;
+}
+
+.irs.irs--shiny .irs-line {
+ border-radius: 8px;
+}
+
+.irs.irs--shiny .irs-grid-pol {
+ height: 6px;
+}
+
+.irs.irs--shiny .irs-grid-text {
+ bottom: 8px;
+}
+
+.irs.irs--shiny .irs-handle:focus-visible,
+.irs.irs--shiny .irs-handle:active {
+ color: #005688;
+ background-color: #005688;
+ border-color: #005688;
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem rgba(0, 123, 194, 0.25);
+}
+
+.irs.irs--shiny ~ .slider-animate-container {
+ text-align: left;
+}
+
+.irs.irs--shiny ~ .slider-animate-container .slider-animate-button {
+ opacity: 1;
+}
+
+.irs.irs--shiny.irs-with-grid ~ .slider-animate-container {
+ margin-top: -5px;
+}
+
+.irs.irs--shiny:not(.irs-with-grid) ~ .slider-animate-container {
+ margin-top: 5px;
+}
+