JQuery UI Slider not displayed

Just started playing with JQuery UI slider, haven't been able to display it on my page. Tried bunch of things bit to no avail. Heres my code, any suggestions would be much appreciated. Am using Django for referring to the javascript files,

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='mockSlider'></div>
<input type='text' id='currentValue' />

CSS

#mockSlider {
    width: 80%;
    margin-bottom: 15px;
    background-color: black;
}

#currentValue {
    width: 10px;
    text-align: center;
}

JavaScript

//http://stackoverflow.com/q/8372529/5076162 - Alexander Dixon 09-29-2016						

$("#mockSlider").slider({
    range: false,
    min: 0,
    max: 8,
    slide: function(event, ui) {
        doSomething(ui.value);
    }
});

function doSomething(sliderValue) {
    $('input[type="text"]').attr('value', sliderValue);
}