Estoy usando el control deslizante jquery, el problema al que me enfrento es que solo se muestra el botón del control deslizante y no el rango. Cuando trato de deslizar el botón, entonces no se desliza.

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"); } });

Después de esto es como aparece la interfaz de usuario

Notas:

1. Confirmé que el div se carga antes de la ejecución de JS y no hay excepción en la consola.
2. Para confirmar la carga de JQuery UI JS y CSS, representé un control diferente (Control de calendario) en el mismo Div, y se cargó y funcionó correctamente.
3. Implementé la devolución de llamada del control deslizante para confirmar que el control funciona desde JQueryUI, y la devolución de llamada del control deslizante funciona correctamente. Puedo ver el registro de la consola que puse en la devolución de llamada.
4. Confirmé a través de la pestaña Elementos en la Consola que el Div se ha agregado con clases JQueryUI
5. Observé que hay un atributo href agregado al botón deslizante, esto apunta a localhost.
6. También confirmé que a través de la consola puedo ver los estilos jquery-UI que se aplican en el botón deslizante

Sería muy útil si alguien me puede ayudar a través de esto.