[Solved] Range Slider knob not loading correctly

[Tony]

Below find my code. I am using MVVM to initate a range-slider. It appears that when the page loads, both knobs are to the left most side, instead of one at the min and one at the max. 

Please note: sometimes when the page loads, the knobs are positioned correctly. 

Please advise.

<script type="text/x-kendo-template" id="filterAgeTemplate">
        <div class="item--agerange">
            <div class="agerange-wrap">
                <div
                    data-role="rangeslider"
                    data-small-step="1"
                    data-large-step="10"
                    data-min="1"
                    data-max="100"
                    data-bind="value: ageRange, events: { change: vm_onAgeSelectorChange }" id="panel-filter__agerange" style="width:160px">
                    <input  />
                    <input />
                </div>

                <div class="agerange-title">Age Range</div>
            </div>

            <div class="agerange-btns ">
                <button class="button button__gray-outline"><span>Reset</span></button>
            </div>
        </div>
    </script>

 

[Preslav]

Hello George,

The provided code looks good to me. I tried to replicate the problem in this testing Dojo:

• http://dojo.telerik.com/AKiCeK

On my side, every time the knobs are positioned correctly. 

That said, could you please modify the above Dojo so it clearly replicates the problem and send it back with your next reply?


Regards,
Preslav
Progress Telerik