vue-circle-slider demo

Examples

Default Custom dimension Custom side Exact sizes Relative sizes Colors Two-way binding

CDN

https://unpkg.com/vue-circle-slider@1.0.0

Default

Usage without any props

Try it with JSfiddle

                  <circle-slider v-model="val1"></circle-slider>

          <div>{{ val1 }}</div>
30

Custom dimension

Custom min/max values and step size

Try it with JSfiddle

                  <circle-slider
            v-model="val2"
            :min="0"
            :max="10000"
            :step-size="100"
          ></circle-slider>

          <div>{{ val2 }}</div>
2000

Custom side

Exact size of svg square side (in px)

Try it with JSfiddle

                  <circle-slider :side="150" v-model="val3"></circle-slider>
          <circle-slider :side="50" v-model="val3"></circle-slider>

          <div>{{ val3 }}</div>
75

Exact sizes

Custom circumference and progress curve width, custom knob radius

Try it with JSfiddle

                  <circle-slider
            v-model="val4"
            :circle-width="8"
            :progress-width="12"
            :knob-radius="10"
          ></circle-slider>

          <circle-slider
            v-model="val4"
            :circle-width="10"
            :progress-width="5"
            :knob-radius="10"
          ></circle-slider>

          <circle-slider
            v-model="val4"
            :circle-width="12"
            :progress-width="3"
            :knob-radius="4"
          ></circle-slider>

          <div>{{ val4 }}</div>
50

Relative sizes

Custom relative circumference and progress curve width, custom relative knob radius.
See params knobRadiusRel, circleWidthRel and progressWidthRel in docs

Try it with JSfiddle

                  <circle-slider
            v-model="val5"
            :circle-width-rel="30"
            :progress-width-rel="15"
            :knob-radius-rel="8"
          ></circle-slider>

          <div>{{ val5 }}</div>
50

Colors

Custom color for circle, progress and knob

Try it with JSfiddle

                  <circle-slider
            v-model="val6"
            circle-color="#edeff0"
            progress-color="#cecece"
            knob-color="#a0a0ff"
          ></circle-slider>

          <circle-slider
            v-model="val6"
            circle-color="#f00"
            progress-color="#0a0"
            knob-color="#0c0"
          ></circle-slider>

          <circle-slider
            v-model="val6"
            circle-color="#cecece"
            progress-color="#00f"
            knob-color="#5555ff"
          ></circle-slider>

          <div>{{ val6 }}</div>
25

Two-way binding

Two way binding with input field

Try it with JSfiddle

                  <circle-slider
            v-model="val7"
            @touchmove="$refs.input.blur()"
          ></circle-slider>
          <!-- @touchmove="$refs.input.blur()" - hide keyboard on touchmove at mobile devices -->

          <input ref="input" type="number" v-model.number="val7" />

vue-circle-slider