Hi there,

I have to integrate Angular into an existing website that has a fancy jQuery UI slider but I'm not sure how to best approach this.

Can I pull jQuery into the component and use it directly? If so how? Should I rewrite the code in vanilla JS?

The function that executes at the moment to build the slider out is below, it also handles orientation change as it adds tick lines to the slider at every (x)px to make it look nice.

Any help really appreciated

<div class="range-slider"> <input type="text" name="numberAds" id="numberAds" readonly> <div id="numberAdsSlider"> <div id="numberAdsSliderHandle" class="ui-slider-handle"></div> <div class="slider-markers"> </div> </div> </div>

var adSlider = $("#numberAdsSlider");
var numberAdsRealValues = [3, 5, 10, 25];
function numberAdsSlider(){
    if($('#numberAdsSlider').length){
        if($('#numberAdsSlider.ui-slider').length){
            adSlider.slider('destroy');
            $('.slider-markers span, .step-label').remove();
            $('.slider-markers').hide();
            setTimeout(function(){
                setUpNumberAdSlider();
                $('.slider-markers').show();
            },500);
        }
        else {
            setUpNumberAdSlider();
        }
    }
}

var initialSliderValue = 4;
function setUpNumberAdSlider(){
    var minVal = 1;
    var maxVal = 4;
    var lineWidthandMargin = 6;
    var initialNumberLines = Math.floor($('#numberAdsSlider').width() / lineWidthandMargin);
    var numberLineRemainder = initialNumberLines % (maxVal - minVal);
    var numberLines = ((2 * initialNumberLines) / 2) - numberLineRemainder;
    adSlider.slider({
        value: initialSliderValue,
        min: minVal,
        max: maxVal,
        step: 1,
        create: function() {
            var sliderVal = $(this).slider("value") - 1;
            $("#numberAds").val(numberAdsRealValues[sliderVal]);
            adSlider.find('.ui-slider-handle').text(numberAdsRealValues[sliderVal]);
            for(var i=0; i<=numberLines; i  ){
                var left = i * lineWidthandMargin;
                $(this).find('.slider-markers').append('<span style="left:' left 'px;"></span>');
            }
            var activeLine = Math.floor(numberLines / (maxVal - minVal)) * sliderVal   1;
            $(this).find('.slider-markers span:nth-child(' activeLine ')').addClass('active');
        },
        slide: function( event, ui ) {
            var sliderVal = ui.value - 1;
            var trueValue = numberAdsRealValues[sliderVal];
            $(this).find('.slider-markers span').removeClass('active');
            $("#numberAds").val(trueValue);
            adSlider.find('.ui-slider-handle').text(trueValue);
            initialSliderValue = ui.value;
            var activeLine = Math.floor(numberLines / (maxVal - minVal)) * sliderVal   1;
            $(this).find('.slider-markers span:nth-child(' activeLine ')').addClass('active');
        }
    }).each(function() {
        var opt = $(this).data().uiSlider.options;
        var vals = opt.max - opt.min;
        for (var i = 0; i <= vals; i  ) {
            var el = $('<label class="step-label">'   (numberAdsRealValues[i   opt.min - 1])   '</label>').css('left', (i/vals*100)   '%');
            $("#numberAdsSlider").append(el);
        }
    });
}

numberAdsSlider();