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

Change Tick labels on a slider generated by helper

3 Answers 391 Views
Slider
This is a migrated thread and some comments may be shown as answers.
stephane
Top achievements
Rank 1
stephane asked on 16 Jun 2014, 03:36 PM
I am succeding in changing tick labels on a slider called on javascript

  <script>
        $(document).ready(function () {
 
            var slider = jQuery("#slider").kendoSlider({
                increaseButtonTitle: "Right",
                decreaseButtonTitle: "Left",
                showButtons: true,
                min: 1,
                max: 4,
                largeStep: 1,
 
                tooltip: {
                    enabled: false
                },
                orientation: "horizontal"
            });
 
            var steps = {};
            steps[0] = 'very low';
            steps[1] = 'medium';
            steps[2] = 'hight';
          
 
            var sliderItems = slider.siblings(".k-slider-items");
             
            $.each(steps, function (index, value) {
                var item = sliderItems.find("li:eq(" + (index) + ")");
                item.attr("title", value);
                item.find("span").text(value);
            });
 
        });
 
    </script>
 
 <div id="slider">
 
</div>

Work!
But, I would like to do the same trick on a Slider generated by an asp helper

@(Html.Kendo().Slider()
                      .Name("nameSlider")
                      .IncreaseButtonTitle("Right")
                      .DecreaseButtonTitle("Left")
                      .Min(0)
                      .Max(3)
                      .SmallStep(1)
                      .Value(0)
                      .Orientation(SliderOrientation.Horizontal)
                      .HtmlAttributes(new { @class = "balSlider" })
                      .Deferred()
)
 
 
  @Html.Kendo().DeferredScripts()
 
 <script>
 
$(document).ready(function () {
 
        var selectedSlider = $("#nameSlider").data("kendoSlider");
 
         var sliderItems = selectedSlider.siblings(".k-slider-items");
 
         $.each(steps, function (index, value) {
                var item = sliderItems.find("li:eq(" + (index) + ")");
                item.attr("title", value);
                item.find("span").text(value);
            });
 
    });
 </script>

unfortunately, it does not work.

Any ideas?



3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 18 Jun 2014, 03:44 PM
Hi Stephane,

I believe the issue in the MVC version is caused by you are getting a reference to the slider widget, not to its input element. Please try the following: 
$(document).ready(function () {
  var steps = {};
   steps[0] = 'very low';
   steps[1] = 'medium';
   steps[2] = 'hight';
      
   var selectedSlider = $("#nameSlider");
   var sliderItems = selectedSlider.siblings(".k-slider-items");
 
   $.each(steps, function (index, value) {
      var item = sliderItems.find("li:eq(" + (index) + ")");
      item.attr("title", value);
      item.find("span").text(value);
  });
});


Regards,
Iliana Nikolova
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
stephane
Top achievements
Rank 1
answered on 27 Jun 2014, 12:44 PM
Thanks for answer Iliana !
yes I am not getting a reference to input element cause for moment, it is not possible with Kendo to change ticks label on slider, so i found a "hack" to change styles around input.



<div class="k-widget k-slider k-slider-horizontal balSlider k-state-default">
    <div class="k-slider-wrap k-slider-buttons">
        <a class="k-button k-button-increase"><span class="k-icon k-i-arrow-e" title="Right">Right</span></a>
        <a class="k-button k-button-decrease"><span class="k-icon k-i-arrow-w" title="Left">Left</span></a>
        <ul class="k-reset k-slider-items"><li class="k-tick k-first k-tick-large" role="presentation" style="width: 39px;" title="1"><span class="k-label">1</span></li>
            <li class="k-tick k-tick-large" role="presentation" style="width: 79px;" title="2"><span class="k-label">2</span></li>
            <li class="k-tick k-tick-large" role="presentation" style="width: 78px;" title="3"><span class="k-label">3</span></li>
            <li class="k-tick k-tick-large" role="presentation" style="width: 78px;" title="4"><span class="k-label">4</span></li>
            <li class="k-tick k-tick-large" role="presentation" style="width: 79px;" title="5"><span class="k-label">5</span></li>
            <li class="k-tick k-tick-large" role="presentation" style="width: 78px;" title="6"><span class="k-label">6</span></li>
            <li class="k-tick k-last k-tick-large" role="presentation" title="7" style="width: 40px;"><span class="k-label">7</span></li>
        </ul>
        <div class="k-slider-track" style="width: 470px;">
            <div class="k-slider-selection" style="width: 157px;"><!-- --></div>
            <a href="#" class="k-draghandle" title="drag" role="slider" aria-valuemin="1" aria-valuemax="7" aria-valuenow="3" tabindex="0" data-role="draggable" style="left: 150px;" aria-valuetext="3">Drag</a>      
        </div>
        <input id="sliderTimePush" class="balSlider" value="0" type="text" data-role="slider"></div>
</div>



Unfortunately getting a reference on input does not help.


If anybody has an idea to Change Tick labels on a slider generated by helper, it would help me!
0
Iliana Dyankova
Telerik team
answered on 01 Jul 2014, 10:39 AM
Hi Stephane,

I tested this scenario and was able to change tick labels on Kendo UI Slider for ASP.NET MVC using the following code snippet (screencast capture): 
$(function () {
   var slider = $("#nameSlider").data("kendoSlider");
   var steps = [];
   steps[0] = 'very low';
   steps[1] = 'medium';
   steps[2] = 'hight';
 
   var largeTickItems = slider.wrapper.find(".k-tick-large");
   $.each(largeTickItems, function (index) {
      var step = steps[index];
      var children;
      $(this).attr("title", step).children().html(step);
   });
});
Please give it a try and let me know if this helps.

Regards,
Iliana Nikolova
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Slider
Asked by
stephane
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
stephane
Top achievements
Rank 1
Share this question
or