We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to customize Numeric Range slider with two handles?

Hi,

We are using <ejs-slider > in our vue project, but default color is red, we like to change its color and change default min and max value, can you help us?


Thanks

CZ


9 Replies

LD LeoLavanya Dhanaraj Syncfusion Team October 13, 2022 01:04 PM UTC

Hi CZ,


Greetings from Syncfusion support.


Query 1: How to change the Slider color?


You can customize the color of the Slider component by following any one of the below ways. The first way is to change the component's default theme to another built-in theme.


Built-in Themes : https://ej2.syncfusion.com/vue/documentation/appearance/theme/


Another way is to use a Theme Studio to generate custom themes with the required colors based on your requirements. Refer to the following links for more details on this.


Theme studio : https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/


Query 2: How to change the default min and max values for the Slider component?


You can get and set the minimum and maximum values of the Slider component by using the min and max properties. Also, the value property is used to denote the current value of the Slider. Based on your requirements, we have prepared a sample to change the color, min, and max values of the Slider component.


Check the below code snippet.


[App.vue]

<ejs-slider id="type" :value="value" :min="minvalue" :max="maxvalue" :type="type"></ejs-slider>

 

data() {

    return {

    value: [4, 5],

    type: "Range",

    mintype: "MinRange",

    minvalue: 1,

    maxvalue: 8,

    };

},

 

<style>

    @import ../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css;

    @import ../node_modules/@syncfusion/ej2-vue-inputs/styles/bootstrap5.css;

</style>


You can find the output screenshots and a sample link below.


Sample(Bootstrap5 theme) : https://codesandbox.io/s/blazing-brook-j3kl7g


Output with default theme(material)


Output with built-in theme(Bootstrap5)


Please follow our suggested way and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj



CZ CZ October 16, 2022 11:24 PM UTC

Thanks

CZ



IL Indhumathy Loganathan Syncfusion Team October 17, 2022 06:20 AM UTC

Hi CZ,


We are glad that the shared solution resolved your queries. Please get back to us if you need any further assistance.


Regards,

Indhumathy L



CZ CZ October 17, 2022 08:59 PM UTC

Hi Indhumathy L,


Thank you for your help, when we develop a tree like control use slider as a component, below is our code

<ejs-slider

     id="type"

     :key="freshkey"

     :value="value"

     :min="minvalue"

     :max="maxvalue"

     :type="type" />


data: function(){

 return {

   value: [4, 5],

   type: "Range",

   minvalue: 1,

   maxvalue: 8

}

}

We meet below issue

(1) only 1 head is show, when the program runs, only on head is showing, 


  But if  resize browser manually, two head are showing, everything is fine


 how to force the control to update manually, I have tried to fresh key, it doesn't work


2. Is there any way to get ride of larger circle when begin to drag a head?  we like to make the control vertical space smaller.


Thanks,


CZ



LD LeoLavanya Dhanaraj Syncfusion Team October 19, 2022 05:34 PM UTC

Hi CZ,


Query 1: Slider handle refreshment


We have validated your reported issue in the Vue Slider component. We suspect that the issue occurs because the Slider component is not refreshed while expanding the tree nodes. We suggest you to use the reposition method to overcome the issue by taking an instance of the Slider component inside the TreeView component's nodeExpanded event. For your reference, we have attached the sample.


Refer the below mentioned code snippets.


[App.vue]

<ejs-treeview id="treeview" :fields="fields" :nodeTemplate="treeTemplate" :nodeExpanded="onNodeExpanded">

</ejs-treeview>

 

var demoVue = app.component("treeTemplate", {…

    template: `<div>

        <div class='ejob' v-if="data.sliderComp">

            <ejs-slider id="slider" :value=data.sliderVal :type=data.types></ejs-slider></div>

        </div>`,

});

 

methods: {

    onNodeExpanded: function (args) {

    document.getElementById("slider").ej2_instances[0].reposition();

    },

}


Query 2 : Is there any way to get rid of larger circle when begin to drag a head? 


With the help of CSS selectors, you can be able to override the styles for the corresponding items. Here, we have set the background-color property as transparent for the Slider handle by using the CSS selector. For your reference, check out the below code snippet.


<style>

  #slider .e-tab-handle::after {

    background-color: transparent;

  }

</style>



Check the sample and documentation links, to know more about the Slider customization.


Documentation : https://ej2.syncfusion.com/vue/documentation/range-slider/how-to/customize-slider-thumb/


Sample : https://codesandbox.io/s/crazy-wescoff-ug4c0n?file=/src/App.vue


Please check the attached sample and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj



CZ CZ October 20, 2022 01:06 AM UTC

Hi Leo,

Thank you for your information, I make a test in our program


Query 1: Slider handle refreshment



  From our test result, reposition is undefined


Query 2 : Is there any way to get rid of larger circle when begin to drag a head? 


It works, but Is there anyway we can get ride of larger circle space?



Thanks,

CZ






LD LeoLavanya Dhanaraj Syncfusion Team October 20, 2022 10:37 AM UTC

Hi CZ,


Query 1: Slider handle refreshment


Basically, reposition is a method that is used to refresh the Slider handle position and it does not return any values. For that reason, you got an undefined return value. We have attached the video footage for your reference. Please check the video footage for the behavior and use the shared sample to achieve the requirement at your end.


Query 2 : Is there any way to get rid of the larger circle when beginning to drag a head?


Based on the information you provided, we were unsure about the exact requirements in the Slider component. Whether you want to reduce the slider handle's highlighted color or need to move the handle dynamically. we need some additional information to validate this further. If possible, please provide a pictorial representation of your requirements. These details will help us to check and provide a prompt solution.


Please get back to us with the requested details.

Regards,

Leo Lavanya Dhanaraj


Attachment: Slider_77546a99.zip


CZ CZ October 21, 2022 11:03 PM UTC

Hi,

Thank you for your help,



Query 1: Slider handle refreshment

It works, 


Query 2 : Is there any way to get rid of the larger circle when beginning to drag a head?

I want to occupy small space in vertical, currently is 


We want to remove the space header handle occupy and reduce vertical space like below



Thanks,

CZ



LD LeoLavanya Dhanaraj Syncfusion Team October 26, 2022 03:14 PM UTC

Hi CZ,


Query 1: Slider handle refreshment


We are glad that your reported query has been resolved.


Query 2 : Is there any way to get rid of the larger circle when beginning to drag a head?


From your shared details, we understand that you want to minimize the Slider component width. With the help of CSS selectors, you can be able to override the styles for the corresponding items. Here, we have reduced the width property by using the CSS selector. For your reference, check the below code snippet.


Check the below mentioned code snippets and output screenshots.


<style>

    .e-control-wrapper.e-slider-container.e-horizontal {

        width: 60%;

    }

</style >



Sample : https://codesandbox.io/s/happy-montalcini-j4izbm?file=/src/App.vue


Please check the sample and confirm whether this your requirement. Please let us know if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj.


Loader.
Live Chat Icon For mobile
Up arrow icon