[Solved] change width of MVC Slider

[Kris Nobels]

Hello,

In the slider of the Ajax version it's possible to change the width of the slider.

How can i do this for the MVC slider ?

[Hristo Germanov]

Hi Kris Nobels,

Thank you for contacting us.

You need to set the width of the input that will turn into the slider.

Html:

<input id="slider" type="range" style="width: 300px;" />

JavaScript:

$("#slider").tSlider();

All the best,

Hristo Germanov
the Telerik team

[Marino]

Okay, this works. :-) But by setting the width with jQuery I was unable to set other options (e.g. Orientation).

Is the only way to set the width (or height for my Vertically oriented slider) by jQuery? I would expect to set it in MVC code too. Here's my code:

<%= Html.Telerik().Slider<int>()
                    .Name("mySlider")
                    .Value(2)
                    .Min(1)
                    .Max(3)
                    .Orientation(SliderOrientation.Vertical)
                    .TickPlacement(SliderTickPlacement.None)
                    .Tooltip(false)
                    .ClientEvents(events => events
                        .OnSlide("onSlideValue")
                        .OnChange("onChangeValue"))
                    .HtmlAttributes(new { height = "120", @class = "profileSlider" })
            %>

By the way, setting the height in the HtmlAttribute didn't work. Also when I set the height property to "120px" it will become "120" in the created INPUT element.

Hope you can help me out.

[Dino]

I have tried the to set the height of my vertical slider using the HtmlAttibutes of the slider inside my .cshtml.

I also tried to modify the Areas/Razor/Views/Slider/FirstLook.cshtml in the example project to the following and it still doesn't adjust the size of the slider.

@(Html.Telerik().Slider<double>()
              .Name("Slider")
              .Min(Model.SliderAttributes.MinValue.Value)
              .Max(Model.SliderAttributes.MaxValue.Value)
              .SmallStep(Model.SliderAttributes.SmallStep.Value)
              .LargeStep(Model.SliderAttributes.LargeStep.Value)
              .Orientation(Model.SliderAttributes.SliderOrientation.Value)
              .ShowButtons(Model.SliderAttributes.ShowButtons.Value)
              .Value(Model.SliderAttributes.Value)
              .HtmlAttributes(new { width = "120px"})
        )

It seems this only modifies the invisible input associated with the slider...
Am I missing something???

[Dimo]

Hello,

Please bear in mind that width and height are obsolete HTML attributes and the Slider does not take them into account. You should use style.

.HtmlAttributes(new { style = "width:120px"})

All the best,
Dimo
the Telerik team

[Dino]

Doh! How did I not see that... Must have forgotten to have my coffee that morning... :) Thanks!!!