Range Slider knob not loading correctly

2 posts, 0 answers
  1. George
    George avatar
    53 posts
    Member since:
    Apr 2014

    Posted 18 Aug Link to this post

    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>

     

  2. Preslav
    Admin
    Preslav avatar
    233 posts

    Posted 22 Aug Link to this post

    Hello George,

    The provided code looks good to me. I tried to replicate the problem in this testing Dojo:
    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top