[data-c42-slider] {
  --c42-slider-start-percent: 0%;
  --c42-slider-end-percent: 0%;
}

[data-c42-slider-track] {
  position: relative;
}

[data-c42-slider-thumb] {
  position: absolute;
  touch-action: none;
}

/* Horizontal positioning */
[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-thumb] {
  inset-block-start: 50%;
  translate: -50% -50%;
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-thumb='end'],
[data-c42-slider][data-orientation='horizontal']
  [data-c42-slider-thumb]:not([data-thumb='start']) {
  inset-inline-start: var(--c42-slider-end-percent);
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-thumb][data-thumb='start'] {
  inset-inline-start: var(--c42-slider-start-percent);
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-range] {
  position: absolute;
  inset-inline-start: var(--c42-slider-start-percent);
  inline-size: calc(var(--c42-slider-end-percent) - var(--c42-slider-start-percent));
}

/* Vertical positioning */
[data-c42-slider][data-orientation='vertical'] [data-c42-slider-thumb] {
  inset-inline-start: 50%;
  translate: -50% 50%;
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-thumb='end'],
[data-c42-slider][data-orientation='vertical']
  [data-c42-slider-thumb]:not([data-thumb='start']) {
  inset-block-end: var(--c42-slider-end-percent);
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-thumb][data-thumb='start'] {
  inset-block-end: var(--c42-slider-start-percent);
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-range] {
  position: absolute;
  inset-block-end: var(--c42-slider-start-percent);
  block-size: calc(var(--c42-slider-end-percent) - var(--c42-slider-start-percent));
}