range slider ticks do not appear

[Tony]

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>

[Stefan]

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