jquery-ui not applying css

Question

I am trying to create a jquery slider, but jquery-ui css is not being applied to a div at all. Any help will be appreciated!

var dummy = document.createElement('div')
dummy.innerHTML = 'dummy'

var wRange = document.createElement('div')
wRange.setAttribute('id', 'range')
wRange.classList.add('cntr')

$("#range").slider({
  range: "min",
  min: 0,
  max: 999,
  value: 50,
  slide: function(e, ui) {
    return $(".ui-slider-handle").html(ui.value)
  }
})

$(".ui-slider-handle").html("50")

document.body.appendChild(dummy)
document.body.appendChild(wRange)

Here is : fiddle

Sergey Khalitov · Accepted Answer · 2016-05-29 07:47:23Z

2

You're selecting elements

$("#range")slider({...});
$(".ui-slider-handle").html("50");

before they appended to body, so jQuery can't find them in a DOM.

Do that:

document.body.appendChild(dummy)
document.body.appendChild(wRange)

$("#range").slider({
  range: "min",
  min: 0,
  max: 999,
  value: 50,
  slide: function(e, ui) {
    return $(".ui-slider-handle").html(ui.value)
  }
})

$(".ui-slider-handle").html("50")

Or jQuery style way:

var dummy = $('<div>').html('dummy');

var wRange = $('<div>')
    .attr('id','range')
    .addClass('cntr')
    .slider({
        range: "min",
        min: 0,
        max: 999,
        value: 50,
        slide: function(e, ui) {
            return $(".ui-slider-handle").html(ui.value)
        }
    });

$(document.body).append(dummy, wRange);

edited May 29, 2016 at 7:47

answered May 29, 2016 at 7:40

Sergey Khalitov

1,0478 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery-ui not applying css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related