Change Tick labels on a slider generated by helper

[stephane]

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?

[Iliana Dyankova]

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

 

 

[stephane]

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!

[Iliana Dyankova]

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