Telerik Forums
UI for ASP.NET MVC Forum
2 answers
99 views

Hello,

I am trying the Kendo Slider for ASP MVC and want to set the inital values programatically. To do this I have this line of code:

 @Html.Kendo.RangeSlider.Name("rangesliderStadtverkehr").Min(0.6).Max(5.5).SmallStep(0.1).LargeStep(1).Values(CDbl(0.6), CDbl(5.5))

 

But when the site is rendered the selectionStart-value is set to 6 and the selectionEnd-value is set to 55. It seems that the decimal-point ist forgotten.

An additional problem is a linebreak at the end of the renderd slider. For both problems I have added an attachment.

Can you help me to fix the problems? Thank you.

Best regards, Martin

Tsvetomir
Telerik team
 answered on 19 Dec 2018
2 answers
68 views

Hello,

 

I'm trying to put title on 2 lines but the layout is not so good.  See attachment.  This is the code used here :

 

steps[6] = 'Might well be expected at some time';
steps[5] = 'Quite possi. could happen';
steps[4] = 'Unusual but possible';
steps[3] = 'Remotely possible';
steps[2] = 'Conceivable but<br/>very unlik.';
steps[1] = 'Pratically impossible';
steps[0] = 'Choose value';
AdapterLegendes("#NoProbabilite", steps);
 
function AdapterLegendes(nomSlider, steps) {
    var slider = $(nomSlider).data("kendoSlider");
 
    var largeTickItems = slider.wrapper.find(".k-tick-large");
    $.each(largeTickItems, function (index) {
        var step = steps[index];
        var children;
        $(this).attr("title", step).children().html(step);
    });
}
Louis
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 07 Jun 2017
1 answer
59 views
How can I adjust a RangeSlider's Min and Max after the control has already been created (i.e. via javascript)?
Magdalena
Telerik team
 answered on 06 Feb 2017
2 answers
135 views

Hello,

1) How I can change the color slider when user select another value of the slide.  Example, selecting 1 the slider become yellow, selecting 2 it's become red, etc.  I have to use the sliderChange I guess.  But what are the JS instructions?

2)  And it's possible the change the thickness of the slider?

 

Thank a lot for your precious help.

Louis
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 09 Jan 2017
1 answer
31 views

Requirements

Telerik Product and Version

Kendo

Supported Browsers and Platforms

IE

Components/Widgets used (JS frameworks, etc.)


Hello Telerik Team,

 

We are looking for a Kendo-MVC control equal to the below link:-

http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_firstlook/defaultcs.aspx

we need to overlay on another control same like the above example. we have already seen the Kendo slider which does not fit into our requirement.

 

Please let us know ASAP.

Rumen
Telerik team
 answered on 09 Sep 2016
6 answers
162 views
Hello.

I have set up my environment to include 

~/Scripts/kendo/2013.3.1324/cultures/kendo.culture.is-IS.min.js

followed by a localization script in _Layout.cshtml like this

<script type="text/javascript">
kendo.culture("@culture");
</script>

and construct a Slider in an Editor Template like so:
@model string
@(Html.Kendo().Slider()
.Name(@ViewData.ModelMetadata.PropertyName)
.Min(0.55)
.Max(34.1))
.SmallStep(0.5)
.LargeStep(5.5)
.Value(@Convert.ToDouble(Model))
)

The problem is that the tooltip will show a dot for decimal separator like "34.1" instead of the expected "34,1" (for example).

Also, when the value is read from the control it contains a dot instead of the comma. As a result, the value will come from the slider as 341 instead of 34.1 (or 34,1 in Icelandic, to be exact).

Do you have any clue what I could do differently, am I missing something or am I misunderstanding the concept of culture and decimal numbers as far as the Slider goes?

Sincerely,
Baldvin
Stéphane
Top achievements
Rank 1
 answered on 23 Mar 2016
2 answers
53 views

For example, if I have a change event as below

function sliderChange(e)
    {
        var msg = "View is changed to " + e.value;
        $("#e.ID").html(msg);
    }

How can I get slider ID then I can change some control related to this ID? 

Thanks

Tong
Top achievements
Rank 1
 answered on 07 Mar 2016
1 answer
441 views

Hello,

 

is it possible to create multiple range slider using Kendo UI ?

see attachement.

 

Thanks.

 

 

Helen
Telerik team
 answered on 09 Feb 2016
1 answer
63 views
Just a sample to skin a slider via css, thought I'd share:
(vendor prefixes omitted for clarity)


.k-slider-track {
    background: linear-gradient(to bottom, rgba(199, 199, 199, 0.7) 5%, rgba(156, 156, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #292929;
    border-radius: 2px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}

.k-slider-selection {
    background: linear-gradient(to bottom, rgba(199, 244, 199, 0.7) 5%, rgba(156, 224, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #293329;
    border-radius: 2px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}

.k-draghandle {
  background: linear-gradient(to bottom, rgba(199, 244, 199, 0.7) 5%, rgba(156, 224, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-color: #294429;
  border-radius: 2px;  
}

.k-tick-large {
  display:none;  
}
Iliana Dyankova
Telerik team
 answered on 03 Mar 2015
1 answer
129 views
If you see the attached images you'll notice that the slider on the right with the square drag handle has a working tooltip, but the slider on the left doesn't have a tooltip when dragged as you can see in the second image. 

I compared the two MVVM based implementations, stripped out the unnecessary information and came up with this: 
<input id="..." name="..." class="post-retirement" data-show-buttons="false" data-role="slider" data-min="0" data-max="2" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}"  data-toggle="tooltip" />
<input id="..." name="..." class="weight-split" data-show-buttons="false" data-role="slider" data-min="0" data-max="1" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

As you can see they're almost identical apart from class names which are used only to style the drag handles differently. 

The JavaScript that activates the tooltip and binds the MVVM objects looks like this: 
//activate tooltips
$("[data-toggle=\"tooltip\"]").tooltip();
 
var postRetirementViewModel = kendo.observable({
    isEnabled: true, 
    isVisible: true, 
    onChange: function (e)
    {
        //get the index for this row
        var index = $(e.sender.element).data("index");
 
        //removed for brevity
    }
});
 
var weightSplitViewModel = kendo.observable({
    isEnabled: true,
    isVisible: true,
    onChange: function (e)
    {
        //removed for brevity
    }
});
 
kendo.bind($(".post-retirement"), postRetirementViewModel);
 
kendo.bind($(".weight-split"), weightSplitViewModel);


Any idea why the left slider tooltip won't show up? 
Hristo Germanov
Telerik team
 answered on 23 Sep 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?