Slider customization

I’m new to DHTLX Touch and was wondering if anyone could provide me an example of how to customize the slider control. I want the slider to look like it would if I set options but use it as min max with step functionally.

Could you attach a picture with the slider you need ?

Please see the attached hand-drawn marking on the min-max slider.


Lines are set only in case of options definition. So, you should generate options array based on your min, max and step values.

If I use the options array set with the min / max and step where step = 1, I get numerous marks which is what I don’t require. I just want to set the marks at specific values such as (-100, -75,-50,-25,0, 25, 50, 75, 100) but want to move the slider in step increments of 1.

You can try to hide unnecessary lines using the following approach:

{ view: "slider", ... on :{ "onAfterRender":function(){ if(this.$view.getElementsByClassName){ var divs = this.$view.getElementsByClassName("dhx_slider_line"); for(var i = 0; i < divs.length; i++){ if(i%25) divs[i].style.display = "none"; } } } } }

Thanks for the example, it works as required!

I can dynamically create the values for the options array but how do I load the new array into the slider?

Something like next must work

$$("slider").define("options", new_array); $$("slider").render();

Thanks, it works great!