range slider ticks do not appear

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

    Posted 11 Jul 2017 Link to this post


    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">
                        data-bind="value: ageRange, events: { change: vm_onAgeSelectorChange }" id="panel-filter__agerange" style="width:160px">
                        <input  />
                        <input />
                    <div class="agerange-title">Age Range</div>
                <div class="agerange-btns ">
                    <button class="button button__gray-outline"><span>Reset</span></button>
  2. Stefan
    Stefan avatar
    1577 posts

    Posted 13 Jul 2017 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:


    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.

    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