CODEWITHSUNDEEP
jqueryasp.net-mvcrazor
markabarmi
markabarmi

Reputation: 255

Jquery slider to populate Razor field

I am trying to get a jQuery slider working by by populating a field within Razor syntax. I have this working by following the jQuery code found https://jqueryui.com/slider/#rangemax but am having trouble in getting this to then populate inside Razor

What I have is the following

Razor:

 <div class="form-group">
        @Html.LabelFor(model => model.SunsdayMinutes, htmlAttributes: new     {@class = "control-label col-md-2" })
    <div class="col-md-10">
            @Html.EditorFor(model => model.SunsdayMinutes, new {     htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.SunsdayMinutes, "",     new { @class = "text-danger" })
        </div>
    </div>
<hr />

jQuery:

 @section Scripts {    
        @Scripts.Render("~/bundles/jqueryval")
        <script type="text/javascript">

    $(function () {
        $("#slider-range-max").slider({
            range: "max",
            min: 1,
            max: 10,
            value: 2,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            }
        });
        $("#amount").val($("#slider-range-max").slider("value"));
    });
    </script>
    }

I have tried putting the amount into a new and wrapping that around the Razor code but it still won't work

Many thanks

Upvotes: 1

Views: 594

Answers (1)

Brian Herbert
Brian Herbert

Reputation: 1191

You should inspect the code in your browser using the developer tools. Check the ids of all the relevant elements and make sure everything matches the sample.

The id for your Editor template will be SunsdayMinutes so you need to change the code:

$('#SunsdayMinutes').val($('#slider-range-max').slider("value"));

Obviously you also need to include the slider div:

<div id="slider-range-max"></div>

Make sure that all the relevant jQuery UI libraries are included and that the versions do not cause any conflicts.

Upvotes: 1

Related Questions