Blazor - Use DevExtreme Slider in Blazor Applications

This example adds a DevExtreme Slider widget to a Blazor application and highlights the following features and capabilities:

• Min and max labels
• Tooltip customization
• Range highlight
• Discrete steps
• Disabled component state
• Dynamic value updates

The example replicates the DevExtreme jQuery Slider demo.

Implementation Details

Register DevExtreme Resources

DevExtreme widgets require the use of DevExtreme scripts and stylesheets. We recommend that you use npm to incorporate DevExtreme into the application.

The DevExpress Blazor Resource Manager automatically registers DevExtreme scripts if your project includes the DevExpress.Blazor package. To apply the DevExtreme Fluent theme, add the dx.fluent.blue.light.css file to the wwwroot/css folder and reference this stylesheet in the Components/App.razor file.

Implement a Wrapper

Implement a Blazor component that wraps the DevExtreme Slider widget. The wrapper consists of the following files (copy them to your solution):

1. SliderState.cs defines a data model that stores slider properties. The model is passed to razor components via cascading parameters to initialize slider states in their OnInitialized lifecycle methods.
2. DxSliderLabelSettings.razor and DxSliderTooltipSettings.razor configure slider label and tooltip settings.
3. DxSlider.razor.js binds the DevExtreme Slider component to the data model.
4. DxSlider.razor renders the Slider as follows:
   • Declares a CascadingValue component and uses ChildContent to customize slider labels and tooltips using Blazor parameters:

     <CascadingValue IsFixed="true" Value="sliderState">
         @ChildContent
         <div @ref="sliderElement"></div>
     </CascadingValue>

   • In the OnAfterRenderAsync lifecycle method, calls the LoadDxResources method to force the Resource Manager to load all client scripts.
   • In the OnParametersSetAsync lifecycle method, updates the internal model state and re-renders the slider component once Blazor parameters change.
   • In the UpdateValueFromClient method, synchronizes server-side state with slider client-side value changes.

Display a Blazor Component

Use the wrapper as a standard Blazor component. This example adds the DevExpress Blazor FormLayout component to the Index.razor file and declares DxSlider objects within layout items to display various slider states and capabilities.

<DxSlider T="int" MinValue="0" MaxValue="100" Value="50">
    <DxSliderLabelSettings Visible="true"
                            Position="VerticalEdge.Top" />
</DxSlider>

Files to Review

• DxSlider.razor
• DxSlider.razor.js
• DxSliderLabelSettings.razor
• DxSliderTooltipSettings.razor
• SliderState.cs
• App.razor
• Index.razor

Documentation

• Add DevExtreme Components to a Blazor Application
• Get Started with DevExtreme jQuery/JS
• DevExtreme JavaScript/jQuery Slider

More Examples

• Blazor - Use DevExtreme Circular Gauge in a Blazor Application
• Blazor - Use DevExtreme Diagram in Blazor Applications

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)