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

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");
        }
    }
}

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

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!

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é