Vue UI Components Documentation

Sets or gets scroll buttons position.

'both'

'left'

'right'

<template>
  <JqxSlider ref="mySlider"
    :height="100" :buttonsPosition="'left'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether the slider is disabled.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :disabled="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the slider's height.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the slider's layout.

'normal'

'reverse'-the slider is filled from right-to-left(horizontal slider) and from top-to-bottom(vertical slider)

<template>
  <JqxSlider ref="mySlider"
    :height="100" :layout="'reverse'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's mode.

'default'- the slider's thumb can be dragged smoothly ( like a scrollbar )

'fixed'- the thumb is dragged with a 'step' specified by the 'step' property.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :mode="'fixed'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's minor ticks frequency.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showMinorTicks="true" :minorTicksFrequency="1"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's minor ticks size.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showMinorTicks="true" :minorTicksFrequency="1" :minorTickSize="10"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's maximum value.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :max="30"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's minimum value.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :min="5"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

<template>
  <JqxSlider ref="mySlider"
    :height="100" :orientation="'vertical'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether the slider is displayed as a range slider and has 2 thumbs. This allows the user to select a range of values. By default, end-users can select only a single value.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :rangeSlider="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :rtl="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the slider's step when the user is using the keyboard arrows, slider increment and decrement buttons or the mouse wheel for changing the slider's value.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :step="3"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether ticks will be shown.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showTicks="false"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether minor ticks will be shown.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showMinorTicks="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether major tick labels will be shown.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showTickLabels="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether the scroll buttons will be shown.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showButtons="false"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets whether the slider range background is displayed. This is the fill between the slider's left button and the slider's thumb to indicate the selected value. In range slider mode, the space between the handles is filled to indicate the selected values.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :showRange="false"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :template="'success'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :theme="'material'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's ticks position.

'top'

'bottom'

'both'

<template>
  <JqxSlider ref="mySlider"
    :height="100" :ticksPosition="'bottom'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's major ticks frequency.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :ticksFrequency="1"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets slider's major ticks size.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :tickSize="10"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the major ticks labels formatting function.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :tickLabelFormatFunction="tickLabelFormatFunction" :showTickLabels="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    methods: {
      tickLabelFormatFunction: function (value) {
        return value;
      }
    }
  }
</script>

Sets or gets whether the slider tooltip will be shown.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :tooltip="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the tooltip's hide delay.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :tooltip="true" :tooltipHideDelay="2000"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the tooltip's position. Possible values: "near", "far"

<template>
  <JqxSlider ref="mySlider"
    :height="100" :tooltip="true" :tooltipPosition="'far'"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the tooltip's tooltip formatting.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :tooltipFormatFunction="tooltipFormatFunction" :tooltip="true"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    methods: {
      tooltipFormatFunction: function (value) {
        return value.toPrecision(2);
      }
    }
  }
</script>

Sets or gets slider's value. This poperty will be an object with the following structure { rangeStart: range_start, rangeEnd: range_end } if the slider is range slider otherwise it's going to be a number.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :value="5"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets range slider's values.The 'rangeSlider' property should be set to true.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :rangeSlider="true" :values=" [5,15] "
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

Sets or gets the slider's width.

<template>
  <JqxSlider ref="mySlider"
    :height="100" :width="300"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    }
  }
</script>

This event is triggered when the value of the slider is changed.

Code examples

Bind to the change event of jqxSlider.

<template>
  <JqxSlider ref="mySlider" @change="onChange($event)"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user is dragging the sliders thumb.

Code examples

Bind to the slide event of jqxSlider.

<template>
  <JqxSlider ref="mySlider" @slide="onSlide($event)"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    methods: {
      onSlide: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user start dragging slider's thumb.

Code examples

Bind to the slideStart event of jqxSlider.

<template>
  <JqxSlider ref="mySlider" @slideStart="onSlideStart($event)"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    methods: {
      onSlideStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user have dragged the slider's thumb and drop it.

Code examples

Bind to the slideEnd event of jqxSlider.

<template>
  <JqxSlider ref="mySlider" @slideEnd="onSlideEnd($event)"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    methods: {
      onSlideEnd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.destroy();
    }
  }
</script>

Decreases the jqxSlider's value with the value of the 'step' property.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.value = 5;
      this.$refs.mySlider.decrementValue();
    }
  }
</script>

Disabling the slider.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.disable();
    }
  }
</script>

Enables the slider.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.disabled = true;
      this.$refs.mySlider.enable();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.focus();
    }
  }
</script>

Gets the slider's value. The returned value is a number or an object. If the Slider is a range slider, the method returns an object with the following fields: rangeStart - the range's start value and rangeEnd - the range's end value..

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      const value = this.$refs.mySlider.getValue();
    }
  }
</script>

Increases the jqxSlider's value with the value of the 'step' property.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.incrementValue();
    }
  }
</script>

Sets the jqxSlider's value. When the slider is not in range slider mode, the required parameter for the value is a number which should be in the 'min' - 'max' range. Possible value types in range slider mode- array, object or two numbers.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      this.$refs.mySlider.setValue(5);
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxSlider ref="mySlider"
    :height="100"
  />
</template>
 
<script>
  import JqxSlider from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxslider.vue';
 
  export default {
    components: {
      JqxSlider
    },
    mounted: function () {
      const value = this.$refs.mySlider.val();
    }
  }
</script>