range slider ticks do not appear

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

    Posted 11 Jul Link to this post

    Hello,

    I am using the range slider via MVVM. I noticed that when i define the width via inline style on the div that sets the range slider, the tick marks disappear. However, if the width is removed, the tick marks appear. Please advise? 

    Edit: My range slider is sitting within a kendo template. I have attached a snippet of my code

     

    <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. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 13 Jul Link to this post

    Hello George,

    After inspecting the scenario I noticed that this will only occur if there are too many ticks to be displayed in the set width. For example, if the width is set to 200px in this scenario, the ticks will appear. Also, if the small step is set to 2+, the ticks will appear again:

    http://dojo.telerik.com/Ehapu

    I will forward this to the developers' team as I can assume that this is by design in order to display the ticks only if there is enough space for them.

    Regards,
    Stefan
    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