Newlogic UI

Appearance

Range ​

Source ​

Example ​

Multi ​

html
<div class="flex justify-between items-center">
    <output class="x-title xs font-normal flex gap-1 after:content-[attr(data-unit)]" data-unit="Kč" id="from" aria-label="Cena od">0</output>
    <output class="x-title xs font-normal flex gap-1 after:content-[attr(data-unit)]" data-unit="Kč" id="to" aria-label="Cena do">10,000</output>
</div>

<div class="x-range mt-1 items-center" data-controller="x-range">
    <input type="range" value="0" step="100" max="10000" min="0" aria-labelledby="from" data-action="input->x-range#setValue" data-x-range-track-param="start">
    <input type="range" value="10000" step="100" max="10000" min="0" aria-labelledby="to" data-action="input->x-range#setValue" data-x-range-track-param="end">
</div>

Single ​

html
<div class="flex justify-between items-center">
    <output class="x-title xs font-normal flex gap-1 after:content-[attr(data-unit)]" data-unit="Kč" id="single" aria-label="Cena od">0</output>
</div>

<div class="x-range mt-1 items-center" data-controller="x-range">
    <input type="range" value="0" step="100" max="10000" min="0" aria-labelledby="single" data-action="input->x-range#setValue">
</div>

More examples can be found in the Winduum docs.

Example CSS ​

css
@import "winduum/src/components/range/props/default.css" layer(theme);
@import "winduum/src/components/range/default.css" layer(utilities);
@import "winduum/src/components/range/multi.css" layer(utilities);
@import "winduum/src/components/range/vertical.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-range-track-block-size: 2.5rem;
    --x-range-thumb-size: 1.125rem;
  }
}

Winduum CSS Code ​

winduum/src/components/range/props/default.css ​

css
:root, :host {
  --x-range-track-block-size: 0.375rem;
  --x-range-thumb-size: 1.125rem;
  --x-range-thumb-border-width: 0;
  --x-range-thumb-outline-width: 2px;
  --x-range-thumb-focus-outline-opacity: 50%;
  --x-range-track-start: 0%;
  --x-range-track-end: 100%;
}

winduum/src/components/range/default.css ​

css
.x-range {
  --x-range-thumb-background-color: var(--color-accent);
  --x-range-thumb-border-color: var(--x-range-thumb-background-color);
  --x-range-track-background-color: var(--color-accent);
  --x-range-track-background:
    linear-gradient(
      to right,
      var(--x-range-track-background-color) 0%,
      var(--x-range-track-background-color) var(--x-range-track-start),
      transparent var(--x-range-track-start),
      transparent var(--x-range-track-end)
    );

  min-block-size: var(--x-range-thumb-size);
  display: grid;

  :where(input) {
    block-size: var(--x-range-track-block-size);
    background-color:
      color-mix(
        in var(--x-range-background-color-space, srgb),
        var(--x-range-background-color, var(--color-accent)) var(--x-range-background-color-opacity, 10%),
        var(--x-range-background-color-mix, var(--color-body))
      );
    position: relative;
    grid-area: 1/1;

    &::-webkit-slider-runnable-track {
      block-size: var(--x-range-track-block-size);
      border-radius: var(--x-range-track-border-radius, var(--radius-full));
      background: var(--x-range-track-background);
    }

    &::-moz-range-track {
      block-size: var(--x-range-track-block-size);
      border-radius: var(--radius-full);
      background: var(--x-range-track-background);
    }

    &::-webkit-slider-thumb {
      inline-size: var(--x-range-thumb-size);
      block-size: var(--x-range-thumb-size);
      background-color: var(--x-range-thumb-background-color);
      border-radius: var(--radius-full);
      border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
      outline:
        var(--x-range-thumb-outline-width) solid
        color-mix(
          in var(--x-range-thumb-outline-color-space, srgb),
          var(--x-range-thumb-outline-color, var(--x-range-thumb-background-color)) var(--x-range-thumb-outline-color-opacity, 0%),
          var(--x-range-thumb-outline-color-mix, transparent)
        );
      margin-block-start: calc((var(--x-range-thumb-size) - var(--x-range-track-block-size)) / 2 * -1);
      transition: outline-color var(--default-transition-duration), outline-offset var(--default-transition-duration);
      cursor: var(--x-range-thumb-cursor, grab);
      appearance: none;
      pointer-events: auto;

      &:active {
        --x-range-thumb-cursor: grabbing;
        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
      }
    }

    &::-moz-range-thumb {
      inline-size: var(--x-range-thumb-size);
      block-size: var(--x-range-thumb-size);
      background-color: var(--x-range-thumb-background-color);
      border-radius: var(--radius-full);
      border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
      outline:
        var(--x-range-thumb-outline-width) solid
        color-mix(
          in var(--x-range-thumb-outline-color-space, srgb),
          var(--x-range-thumb-outline-color, var(--x-range-thumb-background-color)) var(--x-range-thumb-outline-color-opacity, 0%),
          var(--x-range-thumb-outline-color-mix, transparent)
        );
      transition: outline-color var(--default-transition-duration), outline-offset var(--default-transition-duration);
      cursor: var(--x-range-thumb-cursor, grab);
      appearance: none;
      pointer-events: auto;

      &:active {
        --x-range-thumb-cursor: grabbing;
        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
      }
    }

    &:focus-visible {
      &::-webkit-slider-thumb {
        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
      }

      &::-moz-range-thumb {
        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
      }
    }
  }
}

winduum/src/components/range/multi.css ​

css
.x-range {
  :where(input) {
    &:not(:only-of-type) {
      --x-range-track-background:
        linear-gradient(
          to right,
          transparent 0%,
          transparent var(--x-range-track-start),
          var(--x-range-track-background-color) var(--x-range-track-start),
          var(--x-range-track-background-color) var(--x-range-track-end),
          transparent var(--x-range-track-end),
          transparent 100%
        );

      pointer-events: none;

      ~ input {
        background: transparent;
      }
    }
  }
}

winduum/src/components/range/vertical.css ​

css
.x-range:where(.vertical) {
  min-inline-size: var(--x-range-thumb-size);
  container-type: size;

  :where(input) {
    transform: rotate(-90deg);
    width: 100cqh;
    inset-block-start: calc(50% - 50cqw / 2);
    inset-inline-start: calc(50% * -1 + 50cqw);
  }
}

Stimulus Actions ​

setValue ​

Set's values via setValue, setOutputValue and setTrackProperty methods.

Released under the MIT License.

Copyright © 2024-present newlogic.cz