Customizing my first widget

[DaveC426913Member]

I have a standard slider that I want to make a mod to. I want the value of the slider to appear on the slider button itself,
i.e.:
<|–[2]—-|>

$(document).ready( function() {
    initLookAheadSlider();
    $('#lookAhead').bind('change', handleLookAheadSlider );
});
function initLookAheadSlider(){
    $('#lookAhead').jqxSlider({
        width:          220,
        mode:           'fixed',
        min:            0,
        max:            6,
        ticksFrequency: 1,
        value:          0,
        step:           1,
        theme:          'curo-widgets'
    });
}
function handleLookAheadSlider(e){
    console.log(e)
}

I am able capture of the change event but the slider button has no ID to target. Worse, it seems to have no unique set of classes I can target. Its classes match the track underneath it (though that seems impossible). See generated code:

<div class="jqx-slider-track jqx-slider-track-curo-widgets jqx-slider-track-horizontal jqx-slider-track-horizontal-curo-widgets jqx-fill-state-normal jqx-fill-state-normal-curo-widgets jqx-rc-all jqx-rc-all-curo-widgets" style="width: 156px; float: none;">
    <div class="<strong>jqx-slider-slider jqx-slider-slider-curo-widgets jqx-slider-slider-horizontal jqx-slider-slider-horizontal-curo-widgets jqx-fill-state-normal jqx-fill-state-normal-curo-widgets</strong>" style="left: -8px; top: 0px; visibility: hidden; z-index: 15;" title="0"></div> /* the actual button */
    <div class="<strong>jqx-slider-slider jqx-slider-slider-curo-widgets jqx-slider-slider-horizontal jqx-slider-slider-horizontal-curo-widgets jqx-fill-state-normal jqx-fill-state-normal-curo-widgets</strong>" style="left: 18px; top: 0px; z-index: 20;" title="1"></div>
    <div class="jqx-slider-rangebar jqx-slider-rangebar-curo-widgets jqx-fill-state-pressed jqx-fill-state-pressed-curo-widgets jqx-rc-all jqx-rc-all-curo-widgets" style="display: block; height: 8px; width: 26px; position: absolute; left: 0px; top: 0px;"></div>/* the track */
</div>

How can I target the button – at least without some crazy, brittle .next() selector?

[DaveC426913Member]

Sorry, ignore the junk in the code block. I was trying to add styling to the mentioned parts of the code.

[DaveC426913Member]

OK. So there’s two elements, but one is invisible. Targeting ‘.jqx-slider-slider’ works, thus:

    $('.jqx-slider-slider').html(e.args.value);

Thanks. jquery and jqWidgets are easier than I was expecting.

[Author]

Posts