Telerik Forums
Kendo UI for jQuery Forum
1 answer
9 views

Hi. This issue can be replicated in the Telerik dojo for the jQuery Slider.

When tabbing to the decrease and increase buttons and pressing space to invoke the action, nothing happens. I can see the graphical affect of the button being pushed but there is no change in value of the slider.

Tabbing onto the central slider value and moving left and right using the arrow keys works as expected.

Here's what I reckon should happen when using the keyboard with the slider: When the user tabs to the increase/decrease button to give it focus, a press of the spacebar activates the button. The slider value should change accordingly and the focus should stay on the button.

Strangely, when NVDA is active, tabbing to the increase or decrease buttons and pressing spacebar key works the first time. It then shifts focus to the slider itself and I have to start using the left and right arrows instead.

Any thoughts on how to work around this as the built in events are not triggered?

Martin
Telerik team
 answered on 02 May 2024
2 answers
143 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
8 answers
223 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
444 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
350 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
126 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
505 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
180 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
1 answer
228 views

I'm using the jQuery implementation of the range slider in an angular project (because I don't see a range slider component for angular yet, only a single value slider).  I have this working by including the scripts locally, however, I'd like to pull them in via npm upon the bundling of the app via webpack.

Here are the entries from my angular-cli.json.  Webpack compiles successfully, however, scripts.bundle.js complains that the module related to kendo.all.js is not defined.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",       
        "../node_modules/@progress/kendo-theme-default/dist/all.css",       
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",       
        "../node_modules/sortablejs/Sortable.min.js",
        "../node_modules/@progress/kendo-ui/js/kendo.all.js"
      ],

The result is that kendo.all.js looks the same as its entry in scripts.bundle.js.

I'm aware that I can include less than ALL to use the range slider, but I'm just trying to get this working first.

Svet
Telerik team
 answered on 01 Dec 2017
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?