Dark Mode

The slider now supports dark mode by adding the darkmode prop to the component.

<RangeSlider darkmode="force" />
<!-- The slider always uses the dark color scheme, 
regardless of system settings. -->


/* this css is extracted from the slider component for reference */

/* darkmode="force" */
:global(.rangeSlider.rsDark) {
  --slider-accent: var(--slider-dark-accent);
  --slider-accent-100: var(--slider-dark-accent-100);
  --slider-base: var(--slider-dark-base);
  --slider-base-100: var(--slider-dark-base-100);
  --slider-bg: var(--slider-dark-bg);
  --slider-fg: var(--slider-dark-fg);
}

@media (prefers-color-scheme: dark) {
  /* darkmode="auto" */
  :global(.rangeSlider.rsAutoDark) {
    --slider-accent: var(--slider-dark-accent);
    --slider-accent-100: var(--slider-dark-accent-100);
    --slider-base: var(--slider-dark-base);
    --slider-base-100: var(--slider-dark-base-100);
    --slider-bg: var(--slider-dark-bg);
    --slider-fg: var(--slider-dark-fg);
  }
}

/* If you have a custom darkmode toggle on your website, you might want
 * to copy the properties above into your custom darkmode css.
 * 
 * For example:
 * 
 * body.dark .rangeSlider {
 *   --slider-accent: var(--slider-dark-accent);
 *   ...
 * }
 */

Explicit Dark Mode

Set the darkmode prop to force
This will force the slider to use the dark color scheme, regardless of system settings.

<RangeSlider darkmode="force" 
  pips first="label" last="label" range='max' valus={50} limits={[25,100]} />

Automatic Dark Mode

Set the darkmode prop to auto
This will make the slider automatically switch to dark mode based on system preferences.

<RangeSlider darkmode="auto" 
  pips first="label" last="label" range='max' valus={50} limits={[25,100]} />

Toggled Dark Mode

Set the darkmode prop to auto, and add some custom css for the application
If you’re using a site-controlled darkmode toggle, you may also need to add the darkmode css to your stylesheet. This will make the slider automatically switch to dark mode based on your websites settings.

The css below can be copy-pasted, but remember to change the .theme-dark and #toggled to suit your needs.

html.theme-dark .rangeSlider#toggled {
  --slider-accent: var(--slider-dark-accent);
  --slider-accent-100: var(--slider-dark-accent-100);
  --slider-base: var(--slider-dark-base);
  --slider-base-100: var(--slider-dark-base-100);
  --slider-bg: var(--slider-dark-bg);
  --slider-fg: var(--slider-dark-fg);
}