Answered change width of MVC Slider

Kris Nobels

Posted on Apr 26, 2011 (permalink)

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 ?

Reply

Answer Hristo Germanov Hristo Germanov

Posted on Apr 26, 2011 (permalink)

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Reply

Answer Marino

Posted on Jul 15, 2011 (permalink)

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.

Reply

Dino

Posted on Sep 14, 2011 (permalink)

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???

Reply

Dino

Posted on Sep 16, 2011 (permalink)

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

Reply

Related resources for "change width of MVC Slider"

.NET Developer Tools DevTools