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.

This can be useful if you control the darkmode of your website with a sitewide setting/store, you could imagine the prop being set to force when the setting/store is true.

<script>
  // a site-wide theme store (state) in your app 
  let themeStore = writable('light');
</script>

<RangeSlider {darkmode} 
  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);
}