@flightlesslabs/dodo-ui 0.11.1 → 0.12.0

package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte

@@ -0,0 +1,525 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { color = 'primary', size = 'normal', roundness = 1, thumbRoundness = 'full', class: className = '', ref = $bindable(), value = $bindable(), disabled = false, id, min = 0, max = 100, step = 0, name, oninput, onchange, onblur, onfocus, before, after, } = $props();
+const percentageValue = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<div
+  class:disabled
+  class={[
+    'dodo-ui-RangeSlider',
+    `size--${size}`,
+    `roundness--${roundness}`,
+    `thumbRoundness--${thumbRoundness}`,
+    `color--${color}`,
+    className,
+  ].join(' ')}
+  style={`--dodo-ui-RangeSlider-value-percent: ${percentageValue};`}
+>
+  {#if before}
+    <span class="content--before">
+      {@render before()}
+    </span>
+  {/if}
+
+  <input
+    type="range"
+    class="NativeRangeSlider"
+    {min}
+    {max}
+    {step}
+    {oninput}
+    {onchange}
+    {onblur}
+    {onfocus}
+    {id}
+    {name}
+    {disabled}
+    bind:this={ref}
+    bind:value
+  />
+
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</div>
+
+<style>:global(:root) {
+  --dodo-ui-RangeSlider-track-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-RangeSlider-track-filled-disabled-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-RangeSlider-thumb-disabled-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-RangeSlider-thumb-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-RangeSlider-thumb-neutral-hover-bg: var(--dodo-color-neutral-600);
+  --dodo-ui-RangeSlider-thumb-neutral-active-bg: var(--dodo-color-neutral-700);
+  --dodo-ui-RangeSlider-track-filled-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-RangeSlider-thumb-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-RangeSlider-thumb-primary-hover-bg: var(--dodo-color-primary-600);
+  --dodo-ui-RangeSlider-thumb-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-RangeSlider-track-filled-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-RangeSlider-thumb-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-RangeSlider-thumb-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-RangeSlider-thumb-secondary-active-bg: var(--dodo-color-secondary-700);
+  --dodo-ui-RangeSlider-track-filled-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-RangeSlider-thumb-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-RangeSlider-thumb-safe-hover-bg: var(--dodo-color-safe-600);
+  --dodo-ui-RangeSlider-thumb-safe-active-bg: var(--dodo-color-safe-700);
+  --dodo-ui-RangeSlider-track-filled-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-RangeSlider-thumb-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-RangeSlider-thumb-warning-hover-bg: var(--dodo-color-warning-600);
+  --dodo-ui-RangeSlider-thumb-warning-active-bg: var(--dodo-color-warning-700);
+  --dodo-ui-RangeSlider-track-filled-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-RangeSlider-thumb-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-RangeSlider-thumb-danger-hover-bg: var(--dodo-color-danger-600);
+  --dodo-ui-RangeSlider-thumb-danger-active-bg: var(--dodo-color-danger-700);
+  --dodo-ui-RangeSlider-track-filled-danger-bg: var(--dodo-color-danger-500);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-RangeSlider-track-bg: var(--dodo-color-neutral-400);
+  --dodo-ui-RangeSlider-track-filled-disabled-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-RangeSlider-thumb-disabled-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-RangeSlider-thumb-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-RangeSlider-thumb-neutral-hover-bg: var(--dodo-color-neutral-400);
+  --dodo-ui-RangeSlider-thumb-neutral-active-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-RangeSlider-track-filled-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-RangeSlider-thumb-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-RangeSlider-thumb-primary-hover-bg: var(--dodo-color-primary-400);
+  --dodo-ui-RangeSlider-thumb-primary-active-bg: var(--dodo-color-primary-300);
+  --dodo-ui-RangeSlider-track-filled-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-RangeSlider-thumb-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-RangeSlider-thumb-secondary-hover-bg: var(--dodo-color-secondary-400);
+  --dodo-ui-RangeSlider-thumb-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-RangeSlider-track-filled-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-RangeSlider-thumb-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-RangeSlider-thumb-safe-hover-bg: var(--dodo-color-safe-400);
+  --dodo-ui-RangeSlider-thumb-safe-active-bg: var(--dodo-color-safe-300);
+  --dodo-ui-RangeSlider-track-filled-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-RangeSlider-thumb-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-RangeSlider-thumb-warning-hover-bg: var(--dodo-color-warning-400);
+  --dodo-ui-RangeSlider-thumb-warning-active-bg: var(--dodo-color-warning-300);
+  --dodo-ui-RangeSlider-track-filled-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-RangeSlider-thumb-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-RangeSlider-thumb-danger-hover-bg: var(--dodo-color-danger-400);
+  --dodo-ui-RangeSlider-thumb-danger-active-bg: var(--dodo-color-danger-300);
+  --dodo-ui-RangeSlider-track-filled-danger-bg: var(--dodo-color-danger-500);
+}
+
+.dodo-ui-RangeSlider {
+  display: flex;
+}
+.dodo-ui-RangeSlider .NativeRangeSlider {
+  height: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.dodo-ui-RangeSlider .NativeRangeSlider:focus {
+  outline: none;
+}
+.dodo-ui-RangeSlider .NativeRangeSlider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  border: 0;
+  transition: all 150ms;
+}
+.dodo-ui-RangeSlider .NativeRangeSlider::-moz-range-thumb {
+  border: 0;
+  transition: all 150ms;
+}
+.dodo-ui-RangeSlider .content--before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dodo-ui-RangeSlider .content--after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dodo-ui-RangeSlider.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-webkit-slider-runnable-track {
+  height: var(--dodo-ui-track-element-height-normal);
+}
+.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-moz-range-track {
+  height: var(--dodo-ui-track-element-height-normal);
+}
+.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-moz-range-progress {
+  height: var(--dodo-ui-track-element-height-normal);
+}
+.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-webkit-slider-thumb {
+  margin-top: -0.5em;
+  height: calc(var(--dodo-ui-element-height-normal) / 2);
+  width: calc(var(--dodo-ui-element-height-normal) / 2);
+}
+.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-moz-range-thumb {
+  height: calc(var(--dodo-ui-element-height-normal) / 2);
+  width: calc(var(--dodo-ui-element-height-normal) / 2);
+}
+.dodo-ui-RangeSlider.size--normal .content--before {
+  margin-right: 12px;
+}
+.dodo-ui-RangeSlider.size--normal .content--after {
+  margin-left: 12px;
+}
+.dodo-ui-RangeSlider.size--small {
+  height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-webkit-slider-runnable-track {
+  height: var(--dodo-ui-track-element-height-small);
+}
+.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-moz-range-track {
+  height: var(--dodo-ui-track-element-height-small);
+}
+.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-moz-range-progress {
+  height: var(--dodo-ui-track-element-height-small);
+}
+.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-webkit-slider-thumb {
+  margin-top: -0.45em;
+  height: calc(var(--dodo-ui-element-height-small) / 2);
+  width: calc(var(--dodo-ui-element-height-small) / 2);
+}
+.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-moz-range-thumb {
+  height: calc(var(--dodo-ui-element-height-small) / 2);
+  width: calc(var(--dodo-ui-element-height-small) / 2);
+}
+.dodo-ui-RangeSlider.size--small .content--before {
+  margin-right: 8px;
+}
+.dodo-ui-RangeSlider.size--small .content--after {
+  margin-left: 8px;
+}
+.dodo-ui-RangeSlider.size--large {
+  height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-webkit-slider-runnable-track {
+  height: var(--dodo-ui-track-element-height-large);
+}
+.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-moz-range-track {
+  height: var(--dodo-ui-track-element-height-large);
+}
+.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-moz-range-progress {
+  height: var(--dodo-ui-track-element-height-large);
+}
+.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-webkit-slider-thumb {
+  margin-top: -0.6em;
+  height: calc(var(--dodo-ui-element-height-large) / 2);
+  width: calc(var(--dodo-ui-element-height-large) / 2);
+}
+.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-moz-range-thumb {
+  height: calc(var(--dodo-ui-element-height-large) / 2);
+  width: calc(var(--dodo-ui-element-height-large) / 2);
+}
+.dodo-ui-RangeSlider.size--large .content--before {
+  margin-right: 14px;
+}
+.dodo-ui-RangeSlider.size--large .content--after {
+  margin-left: 14px;
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-runnable-track {
+  background-color: var(--dodo-ui-RangeSlider-track-neutral-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-track {
+  background-color: var(--dodo-ui-RangeSlider-track-neutral-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider:focus-visible::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-neutral-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-neutral-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-neutral-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-hover-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-hover-bg);
+}
+.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-runnable-track {
+  background-color: var(--dodo-ui-RangeSlider-track-primary-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-track {
+  background-color: var(--dodo-ui-RangeSlider-track-primary-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider:focus-visible::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-primary-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-primary-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-primary-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-hover-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-hover-bg);
+}
+.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-runnable-track {
+  background-color: var(--dodo-ui-RangeSlider-track-secondary-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-track {
+  background-color: var(--dodo-ui-RangeSlider-track-secondary-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider:focus-visible::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-secondary-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-secondary-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-secondary-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-hover-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-hover-bg);
+}
+.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-runnable-track {
+  background-color: var(--dodo-ui-RangeSlider-track-safe-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-track {
+  background-color: var(--dodo-ui-RangeSlider-track-safe-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider:focus-visible::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-safe-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-safe-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-safe-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-hover-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-hover-bg);
+}
+.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-runnable-track {
+  background-color: var(--dodo-ui-RangeSlider-track-warning-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-track {
+  background-color: var(--dodo-ui-RangeSlider-track-warning-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider:focus-visible::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-warning-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-warning-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-warning-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-hover-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-hover-bg);
+}
+.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-runnable-track {
+  background-color: var(--dodo-ui-RangeSlider-track-danger-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-track {
+  background-color: var(--dodo-ui-RangeSlider-track-danger-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider:focus-visible::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-danger-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-danger-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-danger-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-hover-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-hover-bg);
+}
+.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
+}
+.dodo-ui-RangeSlider.roundness--1 .NativeRangeSlider::-webkit-slider-runnable-track {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-RangeSlider.roundness--1 .NativeRangeSlider::-moz-range-track {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-RangeSlider.roundness--1 .NativeRangeSlider::-moz-range-progress {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-RangeSlider.roundness--2 .NativeRangeSlider::-webkit-slider-runnable-track {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-RangeSlider.roundness--2 .NativeRangeSlider::-moz-range-track {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-RangeSlider.roundness--2 .NativeRangeSlider::-moz-range-progress {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-RangeSlider.roundness--3 .NativeRangeSlider::-webkit-slider-runnable-track {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-RangeSlider.roundness--3 .NativeRangeSlider::-moz-range-track {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-RangeSlider.roundness--3 .NativeRangeSlider::-moz-range-progress {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-RangeSlider.thumbRoundness--1 .NativeRangeSlider::-webkit-slider-thumb {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-RangeSlider.thumbRoundness--1 .NativeRangeSlider::-moz-range-thumb {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-RangeSlider.thumbRoundness--2 .NativeRangeSlider::-webkit-slider-thumb {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-RangeSlider.thumbRoundness--2 .NativeRangeSlider::-moz-range-thumb {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-RangeSlider.thumbRoundness--3 .NativeRangeSlider::-webkit-slider-thumb {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-RangeSlider.thumbRoundness--3 .NativeRangeSlider::-moz-range-thumb {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-RangeSlider.thumbRoundness--full .NativeRangeSlider::-webkit-slider-thumb {
+  border-radius: 50%;
+}
+.dodo-ui-RangeSlider.thumbRoundness--full .NativeRangeSlider::-moz-range-thumb {
+  border-radius: 50%;
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled] {
+  cursor: initial;
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-disabled-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-disabled-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-moz-range-progress {
+  background: var(--dodo-ui-RangeSlider-track-filled-disabled-bg);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb:hover {
+  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb:focus-visible {
+  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-moz-range-thumb {
+  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+}
+.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-moz-range-thumb:active {
+  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+}</style>

package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ChangeEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type { ComponentColor } from '../../../../types/colors.js';
+import type { Snippet } from 'svelte';
+export interface RangeSliderProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** RangeSlider ref */
+    ref?: HTMLInputElement;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** How round should the thumb border radius be? */
+    thumbRoundness?: ComponentRoundness;
+    /** RangeSlider value */
+    value: number;
+    /** disabled state */
+    disabled?: boolean;
+    /** Id */
+    id?: string;
+    /** name */
+    name?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    /** Min Value */
+    min?: number;
+    /** Max Value */
+    max?: number;
+    /** Value Increment step */
+    step?: number;
+}
+declare const RangeSlider: import("svelte").Component<RangeSliderProps, {}, "ref" | "value">;
+type RangeSlider = ReturnType<typeof RangeSlider>;
+export default RangeSlider;

package/dist/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RangeSlider from '../RangeSlider.svelte';
+  import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: RangeSlider,
+    tags: ['autodocs'],
+    argTypes: storyRangeSliderArgTypes,
+  });
+</script>
+
+<Story name="Roundness 1" />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />
+
+<Story name="Thumb Roundness Full" />
+
+<Story name="Thumb Roundness 0" args={{ thumbRoundness: 0 }} />
+
+<Story name="Thumb Roundness 1" args={{ thumbRoundness: 1 }} />
+
+<Story name="Thumb Roundness 2" args={{ thumbRoundness: 2 }} />
+
+<Story name="Thumb Roundness 3" args={{ thumbRoundness: 3 }} />

package/dist/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Roundness;
+type Roundness = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/{src/lib/stories/components/Form/PasswordInput → dist/stories/components/Form/RangeSlider}/Size/Size.stories.svelte

@@ -1,13 +1,13 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import PasswordInput from '../PasswordInput.svelte';
-  import { storyPasswordInputArgTypes } from '../PasswordInput.stories.svelte';
+  import RangeSlider from '../RangeSlider.svelte';
+  import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    component: PasswordInput,
+    component: RangeSlider,
     tags: ['autodocs'],
-    argTypes: storyPasswordInputArgTypes,
+    argTypes: storyRangeSliderArgTypes,
   });
 </script>
 

package/dist/stories/components/Form/RangeSlider/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}