This is a migrated thread and some comments may be shown as answers.

range slider ticks do not appear

1 Answer 331 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 11 Jul 2017, 07:26 PM

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>

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 Jul 2017, 08:39 AM
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 (charts) and form elements.
Tags
Slider
Asked by
Tony
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or