Add prop "reversed" so that max value would be on the left and min on the right

[paceband]

Describe the feature

Provide the ablity to reverse the order of the value so that max value would be on the left and min on the right.

Describe the solution you'd like

Add prop "reversed", default "false".

A clear and concise description of what you want to happen. If "reversed" = true, then max value would be on the left and min value on the right.

Additional context (If there is no relevant content, please delete the block)

I want my slider to show a "speed" and I want to have the slider to show slow first and then fast. But this matches to 2 (slow) and -2 (fast). To make it work I would have to use a temp variable to "minus" my value. Or I have to list all the possibles values in reverse order.

Add any other context or screenshots about the feature request here.

[NightCatSama]

What you need is perhaps direction='rtl' ?

https://nightcatsama.github.io/vue-slider-component/#/basics/simple?hash=set-the-slider-direction

[NightCatSama]

live example: https://jsfiddle.net/ph2stb8g/1/

[paceband]

I tried it but it is not exactly what I want because the color start from right to left and I would still it from left to right so the end user is not away that the value decrease. In the meantime, I've tried another way. See my next post.

[paceband]

Here is what I've tried:

            <VueSlider
              id="speedStartPct"
              v-model="param.speedStartPct"
              :data="dataSliderNeg"
              :marks="{
                '1': '🐢',
                '-1': '🐇',
              }"
            />

  data() {
    return {
      isLoading: true,
      // From 2 to -2 with 0.25 in each steps.
      dataSliderNeg: [...Array(17).keys()].map((x) => -(x++ / 4 - 2)),
    };
  },

Result:

I would have like to have the -1 and 1 well positionned.

[NightCatSama]

live example: https://jsfiddle.net/ph2stb8g/1/

The blue bar in this example is from left to right, the process can be configured.

[paceband]

Works as a charm! Thanks! :-)

            <VueSlider
              id="speedStartPct"
              v-model="param.speedStartPct"
              :min="-2"
              :max="2"
              :interval="0.25"
              :marks="{
                '-2': '🐇',
                '-1': '',
                '0': $t('messages.regular'),
                '1': '',
                '2': '🐢',
              }"
              direction="rtl"
              :process="(dotsPos) => [[100, dotsPos[0]]]"
              tooltip="none"
            />