Utiliser Nouislider #25

New Issue

Sulley · 2024-04-21T09:09:00+02:00

Sulley commented

2024-04-21 09:09:00 +02:00

Utiliser Nouislider pour le wellbeing… Peut-être pour d'autres aussi.

Sulley added the

enhancement

label 2024-04-21 09:09:00 +02:00

Sulley commented

2024-04-21 16:07:51 +02:00

                    <div class="form-group row ">
                        <div class="col-12">
                            <div id="slider-step"></div>
                            <span class="example-val" id="slider-step-value"></span>
                        </div>
                    </div>

et

    <script>
        var stepSlider = document.getElementById('slider-step');
        var stepSliderValueElement = document.getElementById('slider-step-value');

        noUiSlider.create(stepSlider, {
            start: [1],
            step: 1,
            range: {
                'min': [1],
                'max': [10]
            }
        });

        stepSlider.noUiSlider.on('update', function (values, handle) {
            stepSliderValueElement.innerHTML = values[handle];
        });
    </script>

Et récupération des valeurs:

https://stackoverflow.com/questions/49559831/nouislider-use-value-as-form-input

``` <div class="form-group row "> <div class="col-12"> <div id="slider-step"></div> <span class="example-val" id="slider-step-value"></span> </div> </div> ``` et ``` <script> var stepSlider = document.getElementById('slider-step'); var stepSliderValueElement = document.getElementById('slider-step-value'); noUiSlider.create(stepSlider, { start: [1], step: 1, range: { 'min': [1], 'max': [10] } }); stepSlider.noUiSlider.on('update', function (values, handle) { stepSliderValueElement.innerHTML = values[handle]; }); </script> ``` Et récupération des valeurs: https://stackoverflow.com/questions/49559831/nouislider-use-value-as-form-input

Sulley commented

2024-04-21 19:00:45 +02:00

Bon… NoUiSlider c'est pas le panacée… Pas mal limité, supporte mal le CSS surtout pour modifier les tooltips et les pips.
Bref !

Il y a moyen de faire des slider avec JQueryUI :

                    <div class="form-group row ">
                        <div class="col-12">
                            <div id="slider">
                                <div id="custom-handle" class="ui-slider-handle"></div>
                            </div>
                        </div>
                    </div>

et

    <style>
        #custom-handle {
            width: 2em;
            height: 1.6em;
            top: 50%;
            /* margin-left: .5em; */
            margin-left: 0em;
            /* margin-left: 1em; */
            margin-top: -.8em;
            text-align: center;
            line-height: 1.6em;
        }
    </style>
    <script type="text/javascript" >

        $( function() {
            var handle = $("#custom-handle");
            $("#slider").slider({
                value: 5,
                min: 1,
                max: 10,
                step: 1,
                create: function() {
                    handle.text($(this).slider("value"));
                },
                slide: function(event, ui) {
                    $("#amount").val("$" + ui.value);
                    handle.text(ui.value);
                }
            });
            $("#amount").val("$" + $("#slider").slider("value"));
        });
</script>

Mais la aussi il faut jouer avec le CSS... :-/

https://jqueryui.com/slider/#default

Mais il y a aussi moyen de le faire en HTML (mais du coup, il faut modifier le form): https://blog.hubspot.com/website/html-slider

Bon… NoUiSlider c'est pas le panacée… Pas mal limité, supporte mal le CSS surtout pour modifier les tooltips et les pips. Bref ! Il y a moyen de faire des slider avec JQueryUI : ``` <div class="form-group row "> <div class="col-12"> <div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div> </div> </div> </div> ``` et ``` <style> #custom-handle { width: 2em; height: 1.6em; top: 50%; /* margin-left: .5em; */ margin-left: 0em; /* margin-left: 1em; */ margin-top: -.8em; text-align: center; line-height: 1.6em; } </style> <script type="text/javascript" > $( function() { var handle = $("#custom-handle"); $("#slider").slider({ value: 5, min: 1, max: 10, step: 1, create: function() { handle.text($(this).slider("value")); }, slide: function(event, ui) { $("#amount").val("$" + ui.value); handle.text(ui.value); } }); $("#amount").val("$" + $("#slider").slider("value")); }); </script> ``` Mais la aussi il faut jouer avec le CSS... :-/ https://jqueryui.com/slider/#default Mais il y a aussi moyen de le faire en HTML (mais du coup, il faut modifier le form): https://blog.hubspot.com/website/html-slider

Sulley commented

2024-04-23 08:59:09 +02:00

Voila, c'est fait :-)

Sulley closed this issue

2024-04-23 08:59:09 +02:00

Sign in to join this conversation.