We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Problem with vertical Range Slider with oval thumb control

Problem with vertical Range Slider with oval thumb control

Using the sample code I added an Id selector to an SfSlider - 

<SfSlider ID="oval_slider" TValue="decimal" Max="100" Min="0" Orientation="SliderOrientation.Vertical"  ValueChanged="OnSliderValueChanged"  />

Using the following from the code sample:

    #oval_slider.e-control.e-slider .e-handle {
        height: 25px;
        width: 8px;
        top: 3px;
        border-radius: 15px;
        background-color: #f9920b;
    }

The problem is that when the Orientation="SliderOrientation.Vertical" the slider does not operate at all. When Orientation="SliderOrientation.Horizontal" the slider works properly.

Please advise.

3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team June 10, 2020 02:48 PM UTC

Hi Jim,  
 
Greetings from Syncfusion support. 
 
We have checked your reported problem with Slider component. In your code snippet, you have to set top for Slider handle. By default, In Slider component, we dynamically update the top style for positioning the slider handle based on the script side calculations in the component functions in script file. when you will move the slider handle,  we have calculated the dimension of the Slider(top) and update the Slider value based on that dimension. 
 
To resolve your issue, you need to remove the top value in your CSS. 
 
And also, if you want to select the particular value of Slider. We have provided a value property. Using this property, you can able to set value for the slider component. 
 
Refer the below code snippet. 
 
@using Syncfusion.Blazor.Inputs 
 
<SfSlider ID="oval_slider" Value="50" TValue="decimal" Min="0" Max="100" Orientation="@SliderOrientation.Vertical"  /> 
    <style> 
           #oval_slider.e-control.e-slider .e-handle { 
            height: 25px;    
            border-radius: 15px; 
            background-color: #f9920b; 
           } 
           #oval_slider { 
               height:200px; 
           } 
    </style> 
 
Refer the below sample link. 
 
 
Refer the below link for Slider component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
JY Jim Young June 10, 2020 04:31 PM UTC

Thank you for the reply. I have the slider working in vertical mode now but the thumb is off center. How can I adjust this? Also is there a way to change the width of the track?



SP Sowmiya Padmanaban Syncfusion Team June 11, 2020 10:57 AM UTC

Hi Jim, 
 
We have checked your reported query, if you want to change the height and width of Slider track element and align Slider handle position based on it, you can achieve it by overriding default CSS of Slider component. Refer the below code snippet. 
 
  <style> 
        .e-control-wrapper.e-slider-container.e-vertical #oval_slider .e-handle { 
            height: 13px; 
            border-radius: 15px; 
            background-color: #f9920b; 
            width: 19px; 
        } 
        #oval_slider { 
            height: 200px; 
        } 
        .e-control-wrapper.e-slider-container.e-vertical .e-slider-track { 
            width:10px; 
        } 
    </style> 
 
Refer the below screenshot. 
 
 
Refer the sample link below. 
 
 
If you still face issue on achieving your requirement, then please share us your Slider initialization code sample and if possible, replicate your reported issue in our attached sample. We will check and provide you the prompt solution. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 



Loader.
Up arrow icon