CSHTML中的带有2个图标的滑块

Question

我想制作一个滑块，其中只能在一个滑块中选择“最低工资”和“最高工资”。我尝试过，但无法制作出如下图所示的滑块。

类似这样的事情：

以下是我的代码，在其中可以设置2个不同的滑块，但是现在我只想在一个滑块中完成工作：

    @model NurseOneStop.SC.PostedJob
    @{
    ViewBag.Title = "Save";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

    @using (Html.BeginForm())
    {
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.PostedJobId)
    @Html.HiddenFor(model => model.CreatedBy)
    @Html.HiddenFor(model => model.CreatedOn)
    @Html.HiddenFor(model => model.PostedUrl)
    @Html.Hidden("returnUrl", (object)ViewBag.returnUrl)

    <div class="row" ng-controller="PostedJobsCtrl">
    <div class="jobedit-container">

        <h2>Your Jobs</h2>
        @if (Model.PostedJobId > 0)
        {
            <div class="form-group col-md-6 col-xs-12">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group edit-firm">
                    @Html.LabelFor(model => model.PostedUrl, htmlAttributes: new { @class = "control-label col-md-5" })
                        @Html.EditorFor(model => model.PostedUrl, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                </div>
            </div>
        }
        <div class="form-group edit-firm col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobTitle, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.EditorFor(model => model.JobTitle, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.JobTitle, "", new { @class = "text-danger" })
        </div>
        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobReference, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.EditorFor(model => model.JobReference, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.JobReference, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12 valid-frombox">
            @Html.LabelFor(model => model.ValidFrom, htmlAttributes: new { @class = "control-label col-md-5" })
                @Html.EditorFor(model => model.ValidFrom, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.ValidFrom, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12 valid-frombox">
            @Html.LabelFor(model => model.ValidTo, htmlAttributes: new { @class = "control-label col-md-5" })
                @Html.EditorFor(model => model.ValidTo, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.ValidTo, "", new { @class = "text-danger" })
        </div>


        <div class="form-group  col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobLocation, htmlAttributes: new { @class = "control-label col-md-5" })
                <input id="pinput" name="JobLocation" class="form-control" type="text" value="@Model.JobLocation" placeholder="Enter a location">
                <input id="Latitude" name="Latitude" type="hidden" value="@Model.Latitude">
                <input id="Longitude" name="Longitude" type="hidden" value="@Model.Longitude">
                @Html.ValidationMessageFor(model => model.Latitude)
        </div>
        <div class="form-group  col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobLocationDesc, htmlAttributes: new { @class = "control-label col-md-5" })
                @Html.EditorFor(model => model.JobLocationDesc, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.JobLocationDesc, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12">
            <label class="control-label col-md-5" for="Salary">Salary</label>
                <div class="" "slidecontainer">
                    <p class="min-sal">Min Salary</p>
                    <input name="MinSalary" type="range" min="1" max="100" value="10" class="range-slider" id="minRange">
                    <p class="value-box">Salary in $: <span id="mindemo"></span></p>
                </div>

                <div class="" "slidecontainer">
                    <p class="max-sal">Max Salary</p>
                    <input name="MaxSalary" type="range" min="100" max="1000" value="10" class="range-slider" id="maxRange">
                    <p class="value-box">Salary in $: <span id="maxdemo"></span></p>
                </div>
        </div>



        <div class="form-group col-md-6 col-xs-12">
            <label class="control-label col-md-5" for="Experience">Experience</label>
                <div class="" "slidecontainer">
                    <p class="min-sal">Min Experience</p>
                    <input name="MinExp" type="range" min="1" max="5" value="2" class="range-slider" id="minexpRange">
                    <p class="value-box">Exp in Years: <span id="minexpdemo"></span></p>
                </div>

                <div class="" "slidecontainer">
                    <p class="max-sal">Max Experience</p>
                    <input name="MaxExp" type="range" min="5" max="10" value="8" class="range-slider" id="maxexpRange">
                    <p class="value-box">Exp in Years: <span id="maxexpdemo"></span></p>
                </div>
        </div>

        <div class="form-group  col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobTypeId, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
            @Html.DropDownListFor(model => model.JobTypeId, (List<SelectListItem>)ViewBag.JobType, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.JobTypeId, "", new { @class = "text-danger" })
        </div>

        <div class="form-group  col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobContractTypeId, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
            @Html.DropDownListFor(model => model.JobContractTypeId, (List<SelectListItem>)ViewBag.JobContractType, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.JobContractTypeId, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobDesc, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.TextAreaFor(model => model.JobDesc, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.JobDesc, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobSummary, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.TextAreaFor(model => model.JobSummary, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.JobSummary, "", new { @class = "text-danger" })
        </div>




        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.JobApplicationTypeId, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.DropDownListFor(model => model.JobApplicationTypeId, (List<SelectListItem>)ViewBag.ApplicationBy, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.JobApplicationTypeId, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.NumberOfPositions, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.EditorFor(model => model.NumberOfPositions, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.NumberOfPositions, "", new { @class = "text-danger" })
        </div>

        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.CategoryId, htmlAttributes: new { @class = "control-label col-md-5" })
            <span class="Required"> *</span>
                @Html.DropDownListFor(model => model.CategoryId, (List<SelectListItem>)ViewBag.Category, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
        </div>
        <div class="form-group col-md-6 col-xs-12">
            @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label" })
            <div style="height: 34px; float: left; margin-left: 5px;">
                @Html.CheckBoxFor(model => model.Status)
            </div>
        </div>
    </div>
        @* Add New Field*@
        <div class="left_bar inner-registration-form">
            <div class="form-group">
                @Html.LabelFor(model => model.ProfessionId, htmlAttributes: new { @class = "control-label col-md-5" })
                <select id="ddProfession" ng-model="SelectedProfession" class="form-control"
                        ng-options="profession as profession.ProfessionName for profession in ProfessionList"
                        ng-change="ChangeProfession(SelectedProfession)">
                    <option value="" selected>
                        Select Profession
                    </option>
                </select>
                <span class="Required"> *</span>
                <input type="hidden" ng-init='InitPro(@Html.Raw(Json.Encode(Model.ProfessionList)),@Model.ProfessionId,"@Model.Professions");' />
                <input type="hidden" name="ProfessionId" ng-value="SelectedProfession.ProfessionId" />
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ProfessionList, htmlAttributes: new { @class = "control-label  col-md-5" })
                <div class="row">
                    <select id="ddSubProfession" ng-model="subProfession.SelectedSubProfession" class="form-control"
                            ng-options="subprofession as subprofession.ProfessionName for subprofession in SubProfessionList">
                        <option value="" selected>
                            Select Profession
                        </option>
                    </select>
                    <select id="ddExp" ng-model="subProfession.Exp" class="form-control">
                        <option value="" selected>Select Exp.</option>
                        <option value="1">1 Yr</option>
                        <option value="2">2 Yr</option>
                        <option value="3">3 Yr</option>
                        <option value="4">4 Yr</option>
                        <option value="5">5 Yr</option>
                        <option value="6">6 Yr</option>
                        <option value="7">7 Yr</option>
                        <option value="8">8 Yr</option>
                        <option value="9">9 Yr</option>
                        <option value="10">10 Yr</option>
                        <option value="10+">10+ Yr</option>
                    </select>
                    <button type="button" class="add-profession" ng-click="AddToList(subProfession)">+</button>
                </div>
                <div class="row">
                    <div class="skill-view">
                        <input type="hidden" name="Professions" ng-value="selectedSubProfessions" />
                        <div class="skill" ng-repeat="subpro in selectedSubProfessionList">
                            <span>{{subpro.ProfessionName}}</span>
                            <span>{{subpro.Exp}} Years</span>
                            <span class="badge-remove" ng-click="removePro(subpro)">X</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>



    <div class="back-box">
        <div class="form-group">
            <input type="submit" value="Save" class="save_Btn" ng-click="Submit()" />
        </div>
        <div class="back-tolist">
            @Html.ActionLink("Back to List", "Index", new { returnUrl = "/PostedJob/Index" }, new { @class = "btnViewBacktoList" })
        </div>
    </div>
    </div>

    } 
    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/Scripts/jquery.datetimepicker.js"></script>
    <script>
        $(document).ready(function () {
            $('#ValidFrom').datetimepicker({
                datepicker: true,
                timepicker: false,
                format: 'm/d/Y',
                step: 30,
                minDate: new Date(),
                onChangeDateTime: function (dp, $input) {
                    var date = new Date($input.val());
                    date.setMonth(date.getMonth() + 1);
                    date = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
                    $('#ValidTo').val(date);
                },

            });
            $('#ValidTo').datetimepicker({
                datepicker: true,
                timepicker: false,
                format: 'm/d/Y',
                step: 30,
                minDate: new Date()
            });
        });

    </script>




    @*Test Code*@
@*<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>*@
@*<script>
    $(document).ready(function () {
        var config = config || {};


        config.datepicker_defaults = {
            format: 'm/d/Y',
            minDate: new Date(),
        };

        jQuery(function ($) {

            var $from = $('#ValidFrom'),
              $to = $('#ValidTo');

            $from.datepicker($.extend(config.datepicker_defaults, {
                onSelect: function () {
                    var dateTo = new Date($(this).datepicker('getDate'));
                    dateTo.setMonth(dateTo.getMonth() + 1);

                    $to.datepicker('option', 'minDate', $(this).datepicker('getDate'));
                    $to.datepicker('setDate', dateTo);
                }
            }));

            $to.datepicker(config.datepicker_defaults);

        });
        });

    </script>*@


    <script>
            function initMap(){
            var input = document.getElementById('pinput');
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                console.log(JSON.stringify(place));
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }
                var latlong = JSON.parse(JSON.stringify(place.geometry.location));
                document.getElementById('Latitude').value = latlong.lat;
                document.getElementById('Longitude').value = latlong.lng;
            });
        }
        initMap();
    </script>

    <script>
        var slider = document.getElementById("minRange");
        var output = document.getElementById("mindemo");
        output.innerHTML = slider.value;

        slider.oninput = function () {
            output.innerHTML = this.value;
        }
    </script>

    <script>
        var slidermax = document.getElementById("maxRange");
        var outputmax = document.getElementById("maxdemo");
        output.innerHTML = slidermax.value;

        slidermax.oninput = function () {
            outputmax.innerHTML = this.value;
        }
    </script>


    <script>
        var sliderexp = document.getElementById("minexpRange");
        var outputexp = document.getElementById("minexpdemo");
        output.innerHTML = sliderexp.value;

        sliderexp.oninput = function () {
            outputexp.innerHTML = this.value;
        }
    </script>

    <script>
        var slidermaxexp = document.getElementById("maxexpRange");
        var outputmaxexp = document.getElementById("maxexpdemo");
        output.innerHTML = slidermaxexp.value;

        slidermaxexp.oninput = function () {
            outputmaxexp.innerHTML = this.value;
        }
    </script>
    <style>
    .valid-frombox input {
    background: #fff !important;
    cursor: auto !important;
}
</style>

    <style>
        input.btn.btn-nos.btnLgn:hover {
            color: #fff;
           }
    </style>
}