Start Building Professional
Web Apps Today

DHTMLX Slider knob disappears when set to MAX

I'm using the DHTMLX slider on a website and the functionality works fine.

I have 2 sliders.

When moving the slider to the Max the knob disappears.

I've tried to teak the size and other attributes of my div to compensate but the same issue occurs.

Do you have any idea what is causing this?

My HTML code:

<div id="sliderValue1" style="display:none;">
Opacité: <select id="sliderSelect1" onchange="slider1.setValue(this.value);UpdateOpacity(this.value, 'bsb');">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option selected value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> <div id="sliderBox1" style="position:relative;left:80px;top:-18px;height:5px;"></div>
</div>
<div id="sliderValue2" style="display:none;">
Opacité: <select id="sliderSelect2" onchange="slider2.setValue(this.value);UpdateOpacity(this.value, 's57');">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option selected value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select> <div id="sliderBox2" style="position:relative;left:80px;top:-18px;height:5px;"></div>
</div>
<div id="treeboxbox_tree" style="overflow:auto;width:100%;height:100%;background:#D9ECFA;border-color:#D9ECFA;"></div>

var slider1 = new dhtmlxSlider("sliderBox1", 140,"arrowgreen",false,0,100,50,10);
     slider1.attachEvent("onSlideEnd",function(newValue,sliderObj)
     {
     ChangeTheCurrentSelectedValue(document.getElementById('sliderSelect1'), newValue);
     UpdateOpacity(newValue, 'bsb');
     });
slider1.attachEvent("onChange",function(newValue,sliderObj)
{
if (this._busy)
return; //ignore calls during drag
ChangeTheCurrentSelectedValue(document.getElementById('sliderSelect1'), newValue);
UpdateOpacity(newValue, 'bsb');
});
slider1.init();

var slider2 = new dhtmlxSlider("sliderBox2", 140,"arrowgreen",false,0,100,50,10);
     slider2.attachEvent("onSlideEnd",function(newValue,sliderObj)
     {
     ChangeTheCurrentSelectedValue(document.getElementById('sliderSelect2'), newValue);
     UpdateOpacity(newValue, 's57');
     });
slider2.attachEvent("onChange",function(newValue,sliderObj)
{
if (this._busy)
return; //ignore calls during drag
ChangeTheCurrentSelectedValue(document.getElementById('sliderSelect2'), newValue);
UpdateOpacity(newValue, 's57');
});
slider2.init();

var tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
        tree.setImagePath("imgs/");
        //enable checkboxes
        tree.enableCheckBoxes(1);
        tree.setOnLoadingEnd(OnLoadingEnd);
        tree.setOnClickHandler(OnClickHandler);
        tree.setOnCheckHandler(OnCheckHandler);
        tree.loadXML("xml/couche_carto.xml");


PS: this issue occurs in IE 7 and in Firefox 3.0
PS: I'm using also a DHTMLX tree

Are you using latest version of slider ( from 2.0 package ) or older one. 
There was known issue with old version of slider  - very similar to described one, it is fixed in latest version. 

Yes, I'm using the latest version of slider (2.0 package).

I compared the files I'm using and the files you send to me and all the files are identicals. 

I have only an additionnal line in my file dhtmlxslider.js

Line 370 : that.callEvent("onSlideEnd",[that.getValue()]);

           {
                that._busy = true;
                that._applyPos();
                that._busy = false;
                that.callEvent("onSlideEnd",[that.getValue()])
            }

instead of
            {
                that._busy = true;
                that._applyPos();
                that._busy = false;
            }

I known that it's a similar issue but I have the probleme with IE and Firefox

The sample attached to previous post uses the same logic and works correctly
Please check the sliderBox1 and sliderBox2 containers on the page - it maybe that they have some custom styling ( margin, padding, borders ) attached to them, which cause incorrect calculations.

If issue still occurs for you - please provide any kind of sample where it can be reconstructed ( you can send it directly to support@dhtmlx.com )