Styling the two sides of the slider (single handle)

[avi12]

Following #977, I tried to apply the following code:

let slider: API;

onMount(() => {
  slider = noUiSlider.create(elSlider, {
    start: values[0],
    connect: [true, false],
    format: {
      to(value: number) {
        return values[value];
      },
      from() {
        return index;
      }
    },
    range: {
      min: 0,
      max: values.length - 1
    },
    step: 1,
    direction: "ltr"
  });
});

However, I can only style the left-hand-side of the track:

[avi12]

I was able to solve it with

<script lang="ts">
  let elSlider: HTMLDivElement;
  let slider: API;
  let values: any[];
  let value: any = 0;
  let index = values.indexOf(value);

  onMount(() => {
    slider = noUiSlider.create(elSlider, {
      start: values[0],
      connect: "lower",
      format: {
        to(value: number) {
          return values[value];
        },
        from() {
          return index;
        }
      },
      range: {
        min: 0,
        max: values.length - 1
      },
      step: 1,
      direction: "ltr"
    });
  });
</script>

<div class="container">
  <div bind:this={elSlider} class="slider" />
</div>

<style global lang="scss">
  .slider.slider {
    height: 2px;
    /* The right-hand-side of the track */
    background: blue;
    border: none;

    .noUi-connect {
      /* The left-hand-side of the track */
      background: red;
    }
    .noUi-handle {
      width: 16px;
      height: 16px;
      top: -7px;
      right: -8px;
      border-radius: 50%;
      background: red;
      box-shadow: none;

      &::before,
      &::after {
        content: unset;
      }
    }
  }
</style>

[leongersen]

Glad you figured it out 👍

[avi12]

IMHO it should be easier to configure so that it won't require a CSS hack to get it right

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.