Search results

SliderComponent

Represents the VueJS Slider Component.

<ejs-slider :value='value'></ejs-slider>

Properties

colorRange

ColorRangeDataModel[]

Specifies the color to the slider based on given value.

cssClass

string

Specifies the custom classes to be added to the element used to customize the slider.

<template>
    <div id="app">
    <ejs-slider id="default" :value="value" :cssClass="cssClass"></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
  data() {
    return {
      value: 30,
      cssClass: "slidernew"
    };
  }
}
</script>
<style>
  #app {
    color: #008cff;
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
  .slidernew {
    border: 1px solid;
  }
</style>

Defaults to

customValues

string[] | number[]

Specifies an array of slider values in number or string type. The min and max step values are not considered.

Defaults to null

enableAnimation

boolean

Enable or Disable the animation for slider movement.

Defaults to true

enableHtmlSanitizer

boolean

Specifies whether to display or remove the untrusted HTML values in the Slider component. If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

Enable or Disable the slider.

Defaults to true

limits

LimitDataModel

Specified the limit within which the slider to be moved. Refer the documentation here to know more about this property.

Defaults to { enabled: false }

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

max

number

Gets/Sets the maximum value of the slider.

Defaults to 100

min

number

Gets/Sets the minimum value of the slider.

Defaults to 0

orientation

SliderOrientation

Specifies whether to render the slider in vertical or horizontal orientation. Refer the documentation here to know more about this property.

Defaults to ‘Horizontal’

readonly

boolean

Specifies whether the render the slider in read-only mode to restrict any user interaction. The slider rendered with user defined values and can’t be interacted with user actions.

Defaults to false

showButtons

boolean

Specifies whether to show or hide the increase/decrease buttons of Slider to change the slider value. Refer the documentation here to know more about this property.

Defaults to false

step

number

Specifies the step value for each value change when the increase / decrease button is clicked or on arrow keys press or on dragging the thumb. Refer the documentation here to know more about this property.

Defaults to 1

ticks

TicksDataModel

It is used to render the slider ticks options such as placement and step values. Refer the documentation here to know more about this property with demo.

<template>
    <div id="app">
    <ejs-slider id='default' :value='value' :ticks='ticks'></ejs-slider>
    </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
  data() {
    return {
      value: 30,
      ticks: { placement: 'Before', largeStep: 20, smallStep: 10, showSmallTicks: true }
    };
  }
}
</script>
<style>
  #app {
    color: #008cff;
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
  .slidernew {
    border: 1px solid;
  }
</style>

Defaults to { placement: ‘before’ }

tooltip

TooltipDataModel

Specifies the visibility, position of the tooltip over the slider element.

Defaults to { placement: ‘Before’, isVisible: false, showOn: ‘Focus’, format: null }

type

SliderType

Defines the type of the Slider. The available options are:

  • default - Allows to a single value in the Slider.
  • minRange - Allows to select a single value in the Slider. It display’s a shadow from the start to the current value.
  • range - Allows to select a range of values in the Slider. It displays shadow in-between the selection range.
<template>
    <div id="app">
     <label class="labeltext">Default</label>
     <ejs-slider id="default" :value="minvalue"></ejs-slider>
      <label class="labeltext">MinRange</label>
      <ejs-slider id="default" :value="minvalue" :type="mintype"></ejs-slider>
     <label class="labeltext">Range</label>
    <ejs-slider id="type" :value="value" :type="type"></ejs-slider>
    </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
  data() {
    return {
       value: [30, 70],
       type: "Range",
       mintype: "MinRange",
       minvalue: 30
    };
  }
}
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

Defaults to ‘Default’

value

number | number[]

It is used to denote the current value of the Slider. The value should be specified in array of number when render Slider type as range.

Defaults to null

width

number | string

Specifies the width of the Slider.

Defaults to null

Methods

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.

Returns void

reposition

It is used to reposition slider.

Returns void

Events

change

EmitType<SliderChangeEventArgs>

We can trigger change event whenever Slider value is changed. In other term, this event will be triggered while drag the slider thumb.

<template>
    <div id="app">
       <ejs-slider
            id="dynamic_color_slider"
            min="0"
            max="100"
            value="30"
            type="MinRange"
            v-on:created= "onCreated"
            v-on:change= "onChange"
          ></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
      data: function() {
      return {
    
    };
  },
    methods: {
      onCreated() {
          let sliderTrack = document.getElementById("dynamic_color_slider").querySelector(".e-range");
          let sliderHandle = document.getElementById("dynamic_color_slider").querySelector(".e-handle");
          sliderHandle.style.backgroundColor = "green";
          sliderTrack.style.backgroundColor = "green";
        },
      onChange(args) {
          let sliderTrack = document.getElementById("dynamic_color_slider").querySelector(".e-range");
          let sliderHandle = document.getElementById("dynamic_color_slider").querySelector(".e-handle");
          if (args.value > 0 && args.value <= 25) {
          // Change handle and range bar color to green when
              sliderHandle.style.backgroundColor = "green";
              sliderTrack.style.backgroundColor = "green";
          } else if (args.value > 25 && args.value <= 50) {
          // Change handle and range bar color to royal blue
              sliderHandle.style.backgroundColor = "royalblue";
              sliderTrack.style.backgroundColor = "royalblue";
          } else if (args.value > 50 && args.value <= 75) {
          // Change handle and range bar color to dark orange
              sliderHandle.style.backgroundColor = "darkorange";
              sliderTrack.style.backgroundColor = "darkorange";
          } else if (args.value > 75 && args.value <= 100) {
          // Change handle and range bar color to red
              sliderHandle.style.backgroundColor = "red";
              sliderTrack.style.backgroundColor = "red";
          }
        }
      }
    };
</script>
<style>
   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

changed

EmitType<SliderChangeEventArgs>

Fires whenever the Slider value is changed. In other term, this event will be triggered, while drag the slider thumb completed.

created

EmitType<Object>

Triggers when the Slider is successfully created.

renderedTicks

EmitType<SliderTickRenderedEventArgs>

Triggers when the ticks are rendered on the Slider.

<template>
    <div id="app">
       <ejs-slider
              id="slider"
              min="0"
              max="100"
              value="30"
              type="MinRange"
              :ticks="rangeTicks"
              v-on:renderedTicks="onRangeTicks"
            ></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
    data: function() {
    return {
        ticks: { placement: "Before", largeStep: 20 },
        rangeTicks: { placement: "Both", largeStep: 20, smallStep: 5 }
    };
  },
    methods: {
        onRangeTicks(args) {
          let li = args.ticksWrapper.getElementsByClassName("e-large");
          let remarks = [
            "Very Poor",
            "Poor",
            "Average",
            "Good",
            "Very Good",
            "Excellent"
          ];
          for (let i = 0; i < li.length; ++i) {
            li[i].querySelectorAll(".e-tick-both")[1].innerText = remarks[i];
      }
    }
  }
};
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

renderingTicks

EmitType<SliderTickEventArgs>

Triggers on rendering the ticks element in the Slider, which is used to customize the ticks labels dynamically.

<template>
    <div id="app">
       <ejs-slider
        id="ticks"
        :min="minVal"
        :max="maxVal"
        :value="value"
        :ticks="ticks"
        showButtons="true"
        :step="stepVal"
        v-on:renderingTicks="onRenderingTicks"
      ></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
    data: function() {
    return {
      tooltip: { placement: "Before", isVisible: true },
      minVal: new Date("2013-06-13").getTime(),
      maxVal: new Date("2013-06-21").getTime(),
      value: new Date("2013-06-15").getTime(),
      stepVal: 86400000,
      // Slider ticks customization
      ticks: { placement: "After", largeStep: 2 * 86400000 }
    };
  },
    methods: {
      onRenderingTicks(args) {
          let totalMiliSeconds = Number(args.value);
        // Convert the current milliseconds to the respective date in desired format
          let custom = { year: "numeric", month: "short", day: "numeric" };
          args.text = new Date(totalMiliSeconds).toLocaleDateString(
          "en-us",
          custom
        );
        }
      }
    };
</script>
<style>
   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

tooltipChange

EmitType<SliderTooltipEventArgs>

Triggers when the Sider tooltip value is changed.

<template>
    <div id="app">
       <ejs-slider
        id="ticks"
        :min="minVal"
        :max="maxVal"
        :value="value"
        :tooltip="tooltip"
        showButtons="true"
        :step="stepVal"
        v-on:tooltipChange="onTooltipChange"
      ></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
    data: function() {
    return {
        tooltip: { placement: "Before", isVisible: true },
        minVal: new Date("2013-06-13").getTime(),
        maxVal: new Date("2013-06-21").getTime(),
        value: new Date("2013-06-15").getTime(),
        stepVal: 86400000,
        // Slider ticks customization
        ticks: { placement: "After", largeStep: 2 * 86400000 }
    };
  },
    methods: {
        onTooltipChange(args) {
            let totalMiliSeconds = Number(args.text);
            // Convert the current milliseconds to the respective date in desired format
            let custom = { year: "numeric", month: "short", day: "numeric" };
            args.text = new Date(totalMiliSeconds).toLocaleDateString(
            "en-us",
            custom
          );
        },
      }
    };
</script>
<style>
   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>