Telerik Forums
Kendo UI for jQuery Forum
0 answers
93 views

Hello,

I'm reading some datasets from a database and use the values to fill a grid - and on the other hand fill a small form.

The form contains among others a rangeslider.  After a quick Google search I was pointed to the Telerik Forums.

So now I do it with the following code-section

   var rangeslider = $("#rangeslider").data("kendoRangeSlider");
   var rangeValues = [currentDataItem.MinPosition, currentDataItem.MaxPosition];
   rangeslider.setOptions({
      min: 0,
      max: currentDataItem.MaxPositionMeter,
      smallStep: 1,
      largeStep: 10,
      tickPlacement: "both"
   });
   rangeslider.value(rangeValues);

My problem is :
exemplary section of the data-grid
0, 704, 800
48, 752, 800
96, 800, 800

the first 2 numbers "serve" value-array and 800 as the max-parameter.
First 2 lines get displayed correctly, but the 3rd row behaves wierdly. The selection start-marker is displayed correctly, but whatever data-row was displayed at first, determines where the selection-end marker of the rangeslider is drawn, so it doesn't "move" - and the selection-range is displayed with correct length - but as the selection-end marker is not at the correct position the selection suddenly goes beyond  the selection-start marker.

Is there anything I can do to prevent this weird behavior? Is it a problem when the value for selection-end is equal to max?

For reference I include a screenshot of the rangeslider drawn when going from data-row 2 to row 3

The min-value is always 0 for all 3 data-rows

Sven
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 18 Jan 2022
2 answers
127 views

Like subject says - I build in a rangeslider. Now I want it drawn to "scale" => width: 780px ... but every attempt so far has failed 

I tried style= in the <div  it self, then I found you api description , so I build the exact same code from the api-description in my document.ready() function .. only to be greeted with the subject line "rs.resize() is not a function ...

As the remaining Kendo ui stuff is working and also the rangeslider does "everything else" .. conforms to the properties I set in the definition ... 
I'm at the moment without any clue what could lead to the described error message

 

Every help is welcome

my js-code for that matter 
$(document).ready(function () {
$("#rangeslider").kendoRangeSlider({ change: rangeSliderOnChange, slide: rangeSliderOnSlide, min: 0, max: 780, smallStep: 1, largeStep: 10, tickPlacement: "both", }); var rs = $("#rangeslider").getKendoRangeSlider(); rs.wrapper.css("width", "780px"); rs.resize();
});

Sven
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 24 Nov 2021
0 answers
37 views

I have a slider on a page set to a min/max of 0 and 100.   The min/max of this slider is variable and changes depending on what a user has selected in a dropdownlist.  For example, when the user selects an item in the dropdownlist, I change the slider's min/max value of 10 and 50 using setOptions.

 var slider = $("#slider").data("kendoSlider");
                slider.setOptions({
                    min: 10,
                    max: 50,
                    smallStep: 1,
                    largeStep: 5,
                    value: 10
                });

slider.resize();

This seems to work as the slider updates to the properties I set in setOptions.  But after I do this, it doesn't consistently let me jump to a value in the slider.   For example, if I try to click the slider line at 40, the slider won't move to it.  Sometimes it will, sometimes it won't.   If I drag the slider ball to a number it works fine, if I user the increase/decrease arrow buttons it works fine.  But clicking on a number in the slider bar does not work.  

- This jumping to a number in the slider works fine before I dynamically change the properties using "setOptions".
- This problem occurs regardless of what property in the slider I change using "setOptions". 

Any ideas? Thanks.

Werdna
Top achievements
Rank 1
 asked on 22 Jul 2021
8 answers
210 views
Is there currently any way to do a range slider for angularJS? If not, will this be implemented in a future release? I like the angular slider, but it would be nice to have a range slider for angular.

Thanks.
Alex Hajigeorgieva
Telerik team
 answered on 24 Jul 2019
10 answers
426 views

Are there any updates on this topic ? Since I am using Kendo UI slider with razor view having version 2017.2.621.545 and I am not able to get it works in mobile devices specially on iPhone.
The code is as follows - 
 @(Html.Kendo().SliderFor(m => m.PercentChanceClose)
                        .Name("PercentChanceClose")
                        .ShowButtons(true)
                        .Tooltip(true)
                        .Max(100)
                        .Min(0)
                        .SmallStep(5)
                        .LargeStep(10)
                        .Events( e => e.Change("SliderChange"))
                        .IncreaseButtonTitle("Perecent(%) Chance Close")
                        .HtmlAttributes(new { @class = "form-control"})
                        )

JavaScript function - 

 function SliderChange(e) {

        if (e== null) {
            SliderValue(50);
        }
        else {
            SliderValue(e.value);
        }

    }


    function SliderValue(x) {
        var top = $("#PercentChanceClose").closest(".k-slider-wrap");

        if (x >= 0 && x <= 24) {
            $(".k-slider-track", top).css("background-color", "#00ff00");
            $(".k-slider-selection", top).css("background-color", "#00ff00");
          }
        else if (x >= 25 && x <= 74) {
            $(".k-slider-track", top).css("background-color", "#ffa500");
            $(".k-slider-selection", top).css("background-color", "#ffa500");
        }
        else {
            $(".k-slider-track", top).css("background-color", "#ff0000");
            $(".k-slider-selection", top).css("background-color", "#ff0000");
        }
    }

 

Dimitar
Telerik team
 answered on 26 Apr 2019
3 answers
340 views

I'm trying out the native Angular 4 components, and I'm starting with the Slider. I was really surprised not to have value labels for the ticks. You can see that in the current documentation: http://www.telerik.com/kendo-angular-ui/components/inputs/slider/

Not having them as the default wouldn't surprise me much, but there doesn't seem to be a way to turn them on on the API: http://www.telerik.com/kendo-angular-ui/components/inputs/api/SliderComponent/

The slider in kendo-ui had this feature. Am I just missing something?

Lance
Top achievements
Rank 1
 answered on 20 Mar 2019
5 answers
118 views

Hello, one would expect the slider to change when dragging the slider handle on a touch device. Does the widget not support touch/drag gestures in mobile devices?

Thanks,
Bernd

Ankit
Top achievements
Rank 1
 answered on 21 Aug 2018
1 answer
477 views

The change event is not fired when I change values using the API.

https://dojo.telerik.com/@normpetroff/itoqUquY

 

Ivan Danchev
Telerik team
 answered on 13 Jun 2018
5 answers
173 views
Greetings,

Will the drag range feature (available in the telerik asp.net ajax) be added to the Kendo slider widget? Thanks.

RA
Dimitar
Telerik team
 answered on 05 Apr 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?