I have got a slider working in an ASPnet MVC application. I need to show and hide the slider when the user clicks into the field. am struggling to get this part working.

What I have is 

2. <script type="text/javascript">
3. 
   
4.             $(function () {
5.             $("#SundaySlider").slider({
6. 
   
7.                 range: "max",
8.                 min: 1,
9.                 max: 10,
10.                 value: 2,
11.                 slide: function (event, ui) {
12.                     $("#SundayHours").val(ui.value);
13.                 }
14.             });
15.             });
16. </script>

And then in my MVC form using Razor syntax 

2.   <div class="form-group">
3.             @Html.LabelFor(model => model.SundayHours, htmlAttributes: new { @class = "control-label col-md-2" })
4.             <div class="col-md-10">
5.                 @Html.TextBoxFor(model => model.SundayHours, new { htmlAttributes = new { @class = "form-control" } })
6.                 @Html.ValidationMessageFor(model => model.SundayHours, "", new { @class = "text-danger" })               
7.                <br /><br />
8.                  <div id="SundaySlider" style="width:200px"></div>
9.             </div>
10.             
11.         </div>

This gives me a slider below the box but I only want the slider to display when the user clicks into the box.

Hopefully this makes sense 

Thanks for reading 

Cheers