Jquery ui slider: Set step based on checkbox

Question

I am trying to setup my jquery ui slider so that if my checkbox is not checked, it will have a step value of 0.1 or if the checkbox is checked then the step value is 1. I have very limited experience with jquery and am still learning so any help would be appreciated. Here is what I've tried so far. JSFIDDLE

JS

//Setup for jquery ui slider
harmonicSlider = $("#harmonicSlider").slider({
    value: 1,
    min: 1,
    max: 5,
    step: 1,

    //Updates the slider textbox with the current value of the slider.
    slide: function(event, ui){
        var harmonicSnap = $("harmonicSnap");

        setSliderBoxValue(ui.value);

        if(harmonicSnap.checked){
            $(this).slider("option", "step", 1);
        }else{
            $(this).slider("option", "step", 0.1);
        }

        var stepping = $(this).slider('option', 'step');
        console.log("Step: " + stepping);
    },

    //Gets the slider value after a change to the slider is made.
    change: function (event, ui){
        getSliderValue(ui.value);
    }
});

//Grabs the slider value and returns it.
function getSliderValue(slideVal){
    console.log("Slider Value: " + slideVal);
}

//Sets the sliderValueBox to the current value of the slider.
function setSliderBoxValue(currentValue){
    $("#sliderValueBox").val(currentValue);
}

//Sets the step of the slider depending on if the harmonics checkbox is checked or not.
function setSliderIncrement(){
    var harmonicSnap = document.getElementById("harmonicSnap");
    //var slider = $("harmonicsSlider").slider();

    if(harmonicSnap.checked){
        $("harmonicsSlider").slider("option", "step", 1);
        console.log("Step: " + $("harmonicsSlider").slider("option", "step").val());
    }else{
        $("harmonicsSlider").slider("option", "step", 0.1);
        //step = $("harmonicsSlider").slider("option", "step");
        console.log("Step: " + $("harmonicsSlider").slider("option", "step").val());
    }
}

//Loads the harmonic slider selector and slider labels
function loadHarmonicSlider(){
    var sliderValTextBox = $("sliderValueBox");

    harmonicSlider.each(function() {
        //Add labels to slider specified by the min, max, and step values

        var options = $(this).data().uiSlider.options;

        var values = options.max - options.min;

        //Spacing for value labels
        for(var i = 0; i <= values; i++){
            var element = $("<label>" + (i + 1) + "</label>").css("left", (i / values * 100) + "%");

            $("#harmonicSlider").append(element);
        }
    });
}

HTML

<form>
        <div id="harmonicSliderLabel">n:</div>
        <div id="harmonicSlider"></div>
        <div id="sliderInputs">
            <input type="text" id="sliderValueBox" value="1">
            <input type="checkbox" id="harmonicSnap" value="Snap to harmonics" onchange="setSliderIncrement();" checked>Snap to harmonics
        </div>
    </form>

Answer 1

Your snap selector is wrong. You're missing the # char.

Also you should use harmonicSnap.is(":checked") to check if it's checked.

jsfiddle

var harmonicSnap = $("#snap");

setSliderBoxValue(ui.value);
if (harmonicSnap.is(":checked")) {
    $(this).slider("option", "step", 1);
} else {
    $(this).slider("option", "step", 0.1);
}