Telerik Forums
Kendo UI for jQuery Forum
3 answers
206 views

I tried to change the slider's drag handle with the following CSS entry - as it was proposed in the forum:

    .k-slider .k-draghandle {
        background-color: rgb(242, 179, 0);
        width: 20px;
        height: 20px;
        top: -8px;
        left: -8px;
    }
The color is changed indeed. But when I start to drag it turns white.

Is there a way to avoid this?

Magdalena
Telerik team
 answered on 06 Sep 2016
1 answer
965 views

I have a page with kendoui slider, where i am checking if slider value is valid inside slider change event.
If value isn`t valid, i want to roll back slider value to previous value,  
But every time i set slider value (roll back to previous value) inside change event it doesn't work. 
For instance, mySlider initial value is 2.
The user is trying set the value to 10 but my validation function returns false (illegal value) and set my Slider back to it's initial value (2).
For some reason, right after that, the value of my Slider has been set up to 10 (the user choise) again(!!)
So practically my validation function has no meaning!!
It happens inside kendo.all.js in the function :

trigger: function (eventName, e) {
                var that = this, events = that._events[eventName], idx, length;
                if (events) {
                    e = e || {};
                    e.sender = that;
                    e._defaultPrevented = false;
                    e.preventDefault = preventDefault;
                    e.isDefaultPrevented = isDefaultPrevented;
                    events = events.slice();
                    for (idx = 0, length = events.length; idx < length; idx++) {
                    events[idx].call(that, e); ////////////////////////////////////////////////Here it change back to the user choise    
                    }
                    return e._defaultPrevented === true;
                }
                return false;
  },

My Code:

var slider =$("#slider").kendoSlider({
orientation: "vertical",
smallStep:1000,
largeStep:5000,
min:0,
max:100000,
value:50000,
change:Calc
});

function Calc(e){
    if (!(IsValid(e.value)))
   {
      $("#slider").data("kendoSlider").value(prevVal);
   }
}   ////////////////////////////////////////////////Here it calls to:trigger: function (eventName, e) which written above

Is there some any way to do it?

Tanks.

 


Misho
Telerik team
 answered on 09 Aug 2016
4 answers
323 views
I am currently unable to set the values of a slider and rangeslider on a page.  There are no Javascript errors, it appears the sliders are just not redrawing with the new values.  Sliders:

<div>
@{
Html.Kendo().RangeSlider<double>()
      .Name("theRangeSlider")
      .Min(0).Max(100)
      .SmallStep(1)
      .LargeStep(10)
      .Values(new double[] { Model.LowLimit, Model.HighLimit })
      .Events(e => e.Slide("onRangeSliderChanged"))
      .HtmlAttributes(new { style = "width: 425px;" })
      .Render();
}
</div>
<div>
@{
Html.Kendo().Slider<double>()
      .Name("theSlider")
      .Min(0).Max(1)
      .SmallStep(.01)
      .LargeStep(0.1)
      .Tooltip(t => t.Format("{0:P0}"))
      .Value(Model.SliderValue)
      .ShowButtons(false)
      .Events(e => e.Slide("onSliderChanged"))
      .HtmlAttributes(new { style = "width: 425px;" })
      .Render();
}
</div>

How I am setting the values:
$("#theSlider").data("kendoSlider").value(sliderValue);
$("#theRangeSlider").data("kendoRangeSlider").value([lowerValue, higherValue]);
//Have also tried:
$("#theRangeSlider").data("kendoRangeSlider").values([lowerValue, higherValue]);
$("#theRangeSlider").data("kendoRangeSlider").value(lowerValue, higherValue);
$("#theRangeSlider").data("kendoRangeSlider").values(lowerValue, higherValue);

The strange thing is the values appear to be "sticking" for the sliders, as in if you reference $("#theRangeSlider").data("kendoRangeSlider").values() the values are exactly as I set them.  The slider just does not change.
Danail Vasilev
Telerik team
 answered on 03 Aug 2016
2 answers
171 views

HI,

I have a slider:

 @(Html.Kendo().Slider<int>()
                                    .Name("yearSlider")
                                    .IncreaseButtonTitle("-")
                                    .DecreaseButtonTitle("+")
                                    .Min(2016)
                                    .Max(2019)
                                    .SmallStep(1)
                                    .LargeStep(1)
                                    .Value(2016)
                                    .HtmlAttributes(new { @class = "yearSlider" }))

The year is displayed as "2,016". How do I make it show "2016" (no comma)?

 

thanks

Matt
Top achievements
Rank 1
 answered on 25 May 2016
1 answer
152 views

I have a page where slider control options max value get updated as the user makes selections on the page.

The rebuild event occurs fine, and tick marks reflect the new max. However the value defaults to minimum and does not keep the value previously bound to the control. 

I have wired up $scope.$on for both kendoWidgetCreated and kendoRendered and try to re-apply the value in these events but the result is the same, the slider does not reflect the value set in either event and defaults to the slider min value again.

What other events should I listen for, or otherwise, how can I set the slider value after the page has been rebound to new data and the slider has new options?

 

Kiril Nikolov
Telerik team
 answered on 28 Apr 2016
1 answer
88 views
I can initialize the slider from both class and id property.

However, I can't get the value when the slider is instantiated from class:

 

The second console.log below produces "Cannot read property 'value' of undefined"

 

$("#slider").kendoSlider({

  min:0,
  max:100,
  value: 10,
  smallStep: 10,
  largeStep: 50,
  showButtons: false
});
 
$(".slider").kendoSlider({
  min:0,
  max:100,
  value: 20,
  smallStep: 10,
  largeStep: 50,
  showButtons: false
}); 
 
var $sliderFromId = $("#slider").data("kendoSlider");
console.log($sliderFromId.value());
 
var $sliderFromClass = $(".slider").data("kendoSlider");
console.log($sliderFromClass.value());
Kiril Nikolov
Telerik team
 answered on 25 Apr 2016
1 answer
52 views
Is it possible to automatically update a Area graph based on the slider. how to update the graph once the position in the slider has changed, I want to know is it possible to have the Area graph up date as the slider is being pulled. I have created an Area graph in kendo UI with X-axis as string values and i want my slider to listen those values.
Petyo
Telerik team
 answered on 08 Feb 2016
1 answer
258 views
When you drag the slider, the Slide events are fired as expected. When you release the mouse, the following occurs:

- If the cursor is positioned within the drag handle, the Change is event is not fired.
- If the cursor is not positioned within the drag handle, the Change is event is fired.

This behavior can be seen in Slider/Events demo page. Start dragging the drag handle on one of the sliders and move the cursor up or down so it's outside of the drag handle.  When you release the mouse, the Change event is fired.  Now start dragging the drag handle and make sure the cursor is within in the drag handle when you release the mouse and you will see that the Change event is not fired.

Is this the expected behavior?
Kiril Nikolov
Telerik team
 answered on 11 Jan 2016
1 answer
225 views

Hi,

I am upgrading to Kendo UI Pro 2015.3.1111 and have this error: 'Cannot read property 'draggable' of undefined' with the RangeSlider widget.  This happens each time when I grab an end of the range and drag it.

I can reproduce the error by choosing to edit your example at http://demos.telerik.com/kendo-ui/slider/api and then running the example and sliding the range slider. I see the example is using the exact same version

Any idea when this would be fixed or is it already on the radar?


Cheers,

Rob.

Dimiter Madjarov
Telerik team
 answered on 07 Dec 2015
9 answers
246 views
I want to use the Slider in a mobile Kendo UI Projekt.
It works fine exept the draging of the Slider. I can use the arrows or tab direct to the value, but I cannot hold down and slide left / right, as it works in the demo for example.

Any known problems with the slider and the mobile-package?


Greetings


Tom
Petyo
Telerik team
 answered on 28 Sep 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?