Why are the slider buttons of type 'submit' and how do I change them not to be?

===ADMIN EDIT===

Temporary solution:

@inject IJSRuntime js

<TelerikSlider @bind-Value="@SliderValue"
               Min="0"
               Max="100"
               SmallStep="1"
               LargeStep="20"
               Width="400px">
</TelerikSlider>

<script suppress-error="BL9992">
    window.changeButtonTypes = function () {
        var buttons = document.querySelectorAll(".k-slider button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].type = "button";
        }
    };
</script>

@code {
    public int SliderValue { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("changeButtonTypes");
        }
    }
}

The Slider Component only seems to work properly if the range is a multiple of 10.

<TelerikSlider @bind-Value="@MyInteger"
                        Min="0"
                        Max="10"
                        SmallStep="1"
                        LargeStep="1">
        </TelerikSlider>

works as expected.  Same is true if Max is set to 20.  But if Max is set to 7 or 9 or 11 it does not work.  In those cases, clicking on the right arrow button does not do anything and after dragging the slider it magically moves back to 0.  Clicking on a value only works every second time.

Regards,

René

When setting slider value by clicking on a position within slider the ValueChanged event does not always fire.  In those cases the slider looks as if set to the correct value but the connected Value is not updated. 

Unfortunately I could not find a reproducible pattern for this to happen.  Sometimes it occurs on the first or second click but sometimes it takes many clicks for the error to occur again.

The problem sometimes also occurs if setting the value not by clicking on a position but by dragging the slider.  In both cases (clicking on position and sliding) the GUI is updated before the ValueChanged event is fired.  The error does not seem to occur if using the left/right buttons for setting a value.  In this case the ValueChanged event is fired first and then the GUI is updated.

This error renders the Slider Component useless for us because the user can never be sure whether or not the value has been set correctly.

When the Value of the Slider is initially set to a negative number and the user clicks on the left arrow after start, the value of the slider increases while it should decrease. A second click on the left arrow decreases the value correctly.

See REPL

Initial state:

After first click on left arrow (you should expect the value of -300 here, but -200 is shown):

After second click on left arrow

Hello

Could an additional event be exposed on the Slider control? (like OnDrag?)

Have noted that "ValueChanged" is fired every time the value parameter changes (after the user stops dragging the handle), but is it possible to expose the event & value of slider during drag?

This will allow the slider to be used like a search, for example; slide quickly through a large series of photos or data (without letting the mouse button go).

Or is there another way we could achieve this with this control?

Regards

Phil

Description

In case the Change event is used for updating the Value, the interactions of the Slider component will stop working. The issue stems from using the Value parameter to trigger the onchange.

Reproduction (if bug)

https://blazorrepl.telerik.com/QGOycZFQ18ErQlzo17

1. Focus the slider
2. Press the keyboard arrows

Current (if bug)

The value does not change

Expected (if bug)

The value should change. Change event should fire with the upcoming value and not the old one.

Browser (if bug)

All

Project type (if bug)

All

I try to use your slider but when pressed (left/right) arrows the value is not moving correctly. 

(value 1, min value -1, max value 7, step size 2). I press the right arrow and the value is moved to "2" but I expected that slider will be moved to "3". I would expect that the values will change according to the values displayed on the scale (similar to when dragging), not on values that are not visible.

Here is a repro: REPL.

See jQuery for comparison: https://dojo.telerik.com/ijoligUZ.

I want to override the user action and always set the Slider value to 0. However, it looks like I cannot always programmatically update the value in the OnChange handler. Sometimes the Slider keeps the value the user slided to.

Reproduction: https://blazorrepl.telerik.com/cyvYPaFl063537LA25.

Video: https://app.screencast.com/bIVNll3thQfIx.

I have a situation where I need to be able to let the user divide a value by multiple points, and I'd like to be able to implement it as a multi-slider control. Here's a real world situation:

A company has 3 products they sell, and wants to model each different product financially. I want them to be able to drag the sliders representing each product's total portion of revenue for the company, so that the ratios always add up to 100%.

An example of this is at the bottom of the page here: https://nightcatsama.github.io/vue-slider-component/#/basics/process

Any chance this could be possible? Thanks!

Hi.

I love the slider control, but I'd love it even more if it had an option to "snap back to 0" when released. So while the user is clicking/tapping and holding, it updates the value, but when released it goes back to 0. Another option would be to have a boolean property "IsPressed" where you could control this yourself. Or a callback, of course. I looked at extending the source myself, but most of the logic is in the javascript and I'd really rather not. :)

Say hi to Ed.

Best regards,
Eric Johansson
Telerik Champion

PS: Having a Devcraft Ultimate license still gives you a warning about not having a license for the product (UI for Blazor) on this page(the feature request form page).