Range

Nav rapide
Range Simple with input value Double Range

Simple

Range - Voir le template
  • template
<div class="form-element text form-range" x-data="rangeSlider(0, 500, 0)">

    <input type="range"

           id="range"

           name="range" class="" title=""

           x-bind:min="min" x-bind:max="max" x-model="selected" step="10"

           @input="slide()"

    >

    <div class="relative z-10 h-0.75 mt-[43px] mb-3.5">

        <div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>

        <div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0" x-bind:style="'width:'+thumb+'%;'"></div>

        <div class="absolute z-40 -top-[42px] left-0 -translate-x-1/4 px-1.5 bg-primary-accent text-white font-semibold rounded-full whitespace-nowrap" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'" x-text="selected + ' km'"></div>

        <div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>

    </div>

</div>
Simple with input value - Voir le template
Label ici
suffixe
  • template
<div class="form-element text form-range" x-data="rangeSlider(24, 180, 60)">

    <div class="flex justify-between items-start gap-2.5 text-base font-medium">

        <div>Label ici</div>

        <div class="flex gap-2.5">

            <div class="relative">

                <input class="form-text-range" type="text" x-ref="valueinput" @blur="changeValue()" @keydown.enter="changeValue()" @input="hasError = false">

                <span :class="{'hidden': !hasError}" class="hidden absolute bottom-[-10px] translate-y-full -translate-x-1/2 left-1/2 w-full z-20 bg-error text-xs leading-4 text-white p-2.25 rounded-medium arrow-tip-top arrow-tip-top--error">Merci de remplir une valeur entre <span x-text="min"></span> et <span x-text="max"></span></span>

            </div>

            <div class="font-semibold">suffixe</div>

        </div>

    </div>

    <div class="relative">

        <div class="relative max-w-xl w-full pt-3.5">

            <div>

                <input type="range"

                       step="2"

                       x-ref="range"

                       id="rangeInput"

                       x-bind:min="min" x-bind:max="max"

                       x-on:input="slide"

                       x-model="selected">



                <div class="relative z-10 h-0.75">

                    <div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>

                    <div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent left-0 min-w-0" x-bind:style="'width:'+thumb+'%'"></div>

                    <div class="range-thumb" x-bind:style="'left: calc('+thumb+'% - (30px * ('+thumb+' / 100))'"></div>

                </div>

            </div>

        </div>

    </div>

</div>

Double

Double Range - Voir le template
  • template
<div x-data="rangeDoubleSlider(2000, 2022, 1995, 2022)" x-init="mintrigger(); maxtrigger()" class="relative max-w-xl w-full pt-3.5">

    <div>

        <input type="range"

               step="1"

               x-bind:min="min" x-bind:max="max"

               x-on:input="mintrigger"

               x-model="minSelected"

               class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer">



        <input type="range"

               step="1"

               x-bind:min="min" x-bind:max="max"

               x-on:input="maxtrigger"

               x-model="maxSelected"

               class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer">



        <div class="relative z-10 h-0.75">



            <div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3]"></div>



            <div class="absolute z-20 top-0 bottom-0 rounded-md bg-primary-accent" x-bind:style="'right:'+maxThumb+'%; left:'+minThumb+'%'"></div>



            <div class="absolute z-30 w-7.5 h-7.5 top-0 left-0 bg-white border-[3px] border-primary-accent rounded-full -mt-3.25 -ml-1" x-bind:style="'left: '+minThumb+'%'"></div>



            <div class="absolute z-30 w-7.5 h-7.5 top-0 right-0 bg-white border-[3px] border-primary-accent rounded-full -mt-3.25 -mr-3" x-bind:style="'right: '+maxThumb+'%'"></div>



        </div>



    </div>



    <div class="flex justify-between items-center py-5">

        <div>

            <input type="text" maxlength="5" x-on:input="mintrigger" x-model="minSelected" class="px-3 py-2 border border-gray-200 rounded w-24 text-center">

        </div>

        <div>

            <input type="text" maxlength="5" x-on:input="maxtrigger" x-model="maxSelected" class="px-3 py-2 border border-gray-200 rounded w-24 text-center">

        </div>

    </div>



</div>