JQuery UI slider, only the Button loads and not the Range and the slider does not slide

I am using the jquery slider, the issue that I face is only the slider button is displayed and not the range. When I try to slide the button, then it does not slide.

HTML

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

JS

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 500,
  values: [75, 300],
  slide: function (event, ui) {
    console.log("sliding");
  }
});

After this is how the UI comes up

Notes:

1. I confirmed the div gets loaded before the execution of JS and there is no exception in the console.
2. To confirm the load of JQuery UI JS and CSS, I rendered a different control(Calendar Control) in the same Div, and it loaded and worked properly.
3. I implemented the slider call back to confirm that the control works from JQueryUI, and the slider call back works properly. I am able to see the Console log that I have put in the callback.
4. I confirmed through the Elements tab in Console that the Div has been appended with JQueryUI classes
5. I observed that there is a href attribute added to the slider button, this points to localhost.
6. I have also, confirmed that through the console I can see the jquery-UI styles being applied on the slider button

It would be very helpful if someone can help me through this.