NightCatSama/vue-slider-component

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

paceband opened this issue · 6 comments

paceband commented

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.

paceband commented

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 commented

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:
image

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

NightCatSama commented

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

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

paceband commented

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"
            />
  • 😄1