LjSlider Range Slider Examples

Basic use

                    ljSlider({
                        elt: document.querySelector('.myclass'),
                    });
                

Changing start

                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "start": -6
                    });
                

Changing steps

                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "steps": [
                            {"step": 500, "number": 50}
                        ]
                    });
                
                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "steps": [
                            {"step": 30, "number": 10},
                            {"step": 500, "number": 6},
                            {"step": 50, "number": 5}
                        ]
                    });
                

Natural step - different distances between steps

                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "steps": [
                            {"step": 30, "number": 10},
                            {"step": 500, "number": 6},
                            {"step": 50, "number": 5}
                        ],
                        "sameStep": false
                    });
                

More pins

                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "steps": [
                            {"step": 30, "number": 10},
                            {"step": 500, "number": 6},
                            {"step": 50, "number": 5}
                        ],
                        "pins": 4
                    });
                

No green couple linkers

                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "steps": [
                            {"step": 30, "number": 10},
                            {"step": 500, "number": 6},
                            {"step": 50, "number": 5}
                        ],
                        "pins": 2,
                        "diff": false
                    });
                

Changing handler

                    function showVal(vals){
                        console.log('Values are: ',vals)
                    }

                    ljSlider({
                        "elt": document.querySelector('.myclass'),
                        "steps": [
                            {"step": 30, "number": 10}
                        ],
                        "pins": 2,
                        "handler": "showVal"
                    });