Html-schuifregelaar met gewenste positie. Opmaak- en scriptschuifregelaars

Ik ben momenteel bezig met mijn eerste betaalde project. Dit project vereist onder andere dat ik de schuifregelaars opmaak en script. Er zijn een paar interessante punten die ik onder uw aandacht wil brengen, zoals weergaveproblemen in IE, Android WebKit en het juiste gebruik van invoer- en wijzigingsgebeurtenissen. En ook een snel overzicht van de syntaxis.

Hier is mijn voorbeeld. In dit specifieke geval worden gebruikers uit Nederland gevraagd om met schuifregelaars 100 miljoen euro aan begrotingsmiddelen over verschillende afdelingen te verdelen. In dit geval mag de totale waarde van alle schuifregelaars niet hoger zijn dan 100 (miljoen), waarvoor een klein script moet worden geschreven.

Schuifregelaar, spoor en schuifregelaar

Hier is een schuifregelaar. Het is technisch bekend als, en wordt niet ondersteund door IE9 en lager.

Hier is de HTML-code:

Een slider bestaat uit een track waarlangs de gebruiker de slider sleept. Stijlen kunnen worden toegepast op het spoor en de schuifregelaar, maar niet op scripts.

Stijl basics

Het stylen van sliders is niet zo moeilijk. De slider en track kunnen worden gestyled, hoewel de vereiste pseudo-elementen browserafhankelijk zijn:

Gebruik voor de schuifregelaar -webkit-slider-thumb, -moz-range-thumb of -ms-thumb.

De track kan worden "betreden" met -webkit-slider-runnable-track, -moz-range-track of -ms-track.

U kunt deze selectors niet in dezelfde regel combineren, hoewel het juister is om voor alle browsers dezelfde stijlen te gebruiken ( behalve de inspringingen voor de schuifregelaar). Als de browser één selector vindt die hij niet herkent, negeert hij alle andere. U moet dus een server-side CSS-generator herhalen of gebruiken.

IE en MS Edge vereisen een transparante kleur en randkleur op het spoor, anders zullen ze de standaard spoorstijlen weergeven. Ze hebben ook andere marges nodig voor de slider dan in andere browsers.

In mijn voorbeeld is de schuifregelaar ongeveer 40 pixels hoog. Het blijkt dat de stijlen van de hoofdschuifregelaar een overloop hebben: verborgen eigenschappenset, die het grootste deel van de schuifregelaar in Edge en IE verbergt. Om dit op te lossen, moest ik de hoogte van de schuifregelaar expliciet instellen.

In IE, maar niet in Edge, is de schuifregelaar ingesprongen. Zet de padding dus op padding: 0 en bespaar jezelf hoofdpijn.

Ik heb verschillende keren gelezen dat MS Edge de -webkit- eigenschappen zou moeten ondersteunen. Maar in de praktijk bleek het onmogelijk om met dezelfde set stijlen te werken voor zowel Edge als WebKit/Blink. Ik raad aan om aparte -ms- stijlen te gebruiken, al was het maar omdat ze nodig zijn voor IE10 en IE11. Het is het beste om de -ms- stijlen na de -webkit- te definiëren: op deze manier worden de -ms- stijlen exact uitgevoerd in Edge.

In browsers die zijn gebouwd op de WebKit- en Blink-engines, heeft de schuifregelaar standaard box-sizing: border-box, terwijl in alle andere browsers de waarde van deze eigenschap gelijk is aan content-box. Het is beter om de grootte van de doos expliciet in te stellen voor de schuifregelaar.

WebKit en Blink vereisen ook -webkit-uiterlijk: geen, met één uitzondering. Zie onder.

CSS-sjabloon

Al deze kleine problemen leiden tot het volgende CSS-patroon:

invoer (-webkit-uiterlijk: geen; hoogte: 35px; / * stel uw lengte in * / opvulling: 0; / * uw schuifregelaarstijlen * /) invoer:: - webkit-slider-thumb (-webkit-uiterlijk: geen; vak -sizing: content-box; / * style je slider * /) input :: - moz-range-thumb (/ * style je slider opnieuw * /) input :: - ms-thumb (/ * zou na -webkit- moeten komen * / / * style je slider opnieuw * / / * kan andere padding nodig hebben * /) input :: - webkit-slider-runnable-track (/ * style je track * /) input :: - moz-range-track (/ * uw trackstijlen opnieuw * /) invoer :: - ms-track (/ * moet komen na -webkit- * / border-color: transparant; kleur: transparant; / * uw trackstijlen opnieuw * /)

De uiterlijk-eigenschap en de Android WebKit-bug

Een ander nadeel van op WebKit en Blink gebaseerde browsers is dat u de eigenschap -webkit-appearance: none moet instellen voor de schuifregelaar en voor de schuifregelaar ( maar niet voor de baan). Dit wordt weergegeven in het bovenstaande CSS-sjabloon.

Het echte probleem is dat Android WebKit vereist dat u deze verklaring niet gebruikt. Als u -webkit-appearance toevoegt: geen Android WebKit geeft uw stijlen niet correct weer. Als u deze code verwijdert, wordt de fout opgelost, maar dan worden de schuifregelaarstijlen niet weergegeven in Safari, Chrome en sommige andere browsers. Laten we dit probleem samen oplossen.

We zetten -webkit-uiterlijk: geen in CSS, dit is de enige oplossing die toekomst heeft. In Android WebKit willen we de waarde wijzigen in slider-horizontaal. Maar hoe weten we of we Android WebKit gebruiken?

Browserherkenning? Dit wordt in onze kringen niet geaccepteerd - wat maar het beste is: het zou niet werken in Xiaomi Chromium 34 (of 35), dat is gebaseerd op Chromium en daarom een waarde van geen vereist, maar is "vermomd" als Android.

Mijn oorspronkelijke plan was om toegang te krijgen tot de schuifregelaarstijlen en te kijken of ze overeenkomen met de mijne. Als ze niet passen, gebruiken we slider-horizontal:

window.getComputedStyle (schuifregelaar, ":: - webkit-slider-thumb"). hoogte;

Het blijkt dat deze aanpak altijd de standaardstijlen uitvoert, niet uw CSS. Over het algemeen werken scripts die iets proberen te doen met een track of slider meestal niet.

Toen zag ik dat dit gebruik van getComputedStyle () niet wordt ondersteund in Android WebKit. Er wordt geen stijl geretourneerd, zelfs niet de standaardstijlen.

Dus schreef ik een klassieke truc die de ene bug gebruikt om een andere, niet-gerelateerde bug te verwijderen. Gelukkig is dit een veilige truc, aangezien beide fouten alleen in Android WebKit kunnen verschijnen en deze browser niet meer wordt ontwikkeld:

var testAndWK = window.getComputedStyle (schuifregelaar, ":: - webkit-slider-thumb"). hoogte; if (! testAndWK) (slider.style.WebkitAppearance = "slider-horizontal";)

U kunt de test één keer uitvoeren en de resultaten voor elke schuifregelaar gebruiken. Het maakt niet uit welke CSS-eigenschap u test, controleer of deze daadwerkelijk bestaat. Als er geen waarde wordt geretourneerd, stel dan in -webkit-uiterlijk: slider-horizontaal voor elke schuif. Het probleem is opgelost. Sterker nog, andere browsers negeren ons terwijl we —webkit- gebruiken.

De voortgangsbalk invullen

In mijn voorbeeld moet het spoor links van de schuifregelaar een andere achtergrondkleur hebben dan het spoor rechts. IE / Edge en Firefox stellen voor om hiervoor pseudo-elementen te gebruiken, WebKit en Blink niet. Deze code lost het probleem op in alle versies van IE, Firefox en Edge:

input :: - ms-fill-lower (achtergrondkleur: # 5082e0;) input :: - moz-range-progress (achtergrondkleur: # 5082e0;)

Voor WebKit- en Blink-browsers is een JavaScript-oplossing nodig. Ik heb de mijne geleend van de voorbeelden van Ana Tudor. Deze oplossing gebruikt een lineair verloop met een stopkleur die wordt berekend op basis van de huidige schuifregelaarwaarde. Bekijk het script, vooral de code voor de handleSlider () functie.

Knopinfo

Ana Tudor liet ook zien hoe je het: before pseudo-element kunt gebruiken als een gestileerde tooltip met de huidige waarde. Helaas bleek dat IE/Edge en Firefox geen ondersteuning bieden voor: voor of: na in dit geval. IE / Edge heeft een ingebouwde tooltip (zie hieronder), maar Firefox kan geen tooltips weergeven.

Ik heb een bewegend element geprobeerd dat reageert op de beweging van de schuifregelaar, maar scripting werkt niet en het is onmogelijk om de huidige coördinaten van de schuifregelaar te krijgen. Ook geprobeerd om de huidige waarde van de schuifregelaar te gebruiken in plaats van coördinaten, maar de poging is mislukt. Uiteindelijk hebben we besloten om een statische hint te gebruiken ( wat niet echt een idee lijkt).

IE / Edge heeft een ingebouwde tooltip die voor het grootste deel niet kan worden gestyled. Gelukkig kun je het verbergen:

invoer :: - ms-tooltip (weergave: geen;)

Gebeurtenissen invoeren en wijzigen

Wanneer de gebruiker de schuifregelaar langs het spoor beweegt, kan de schuifregelaar invoer activeren of gebeurtenissen wijzigen. Sommige browsers "vuren" voortdurend gebeurtenissen tijdens de verplaatsing, terwijl andere pas nadat de verplaatsing is gestopt.

Bij het volgen van gebruikersacties met een schuifregelaar, onderschept u invoer en wijzigt u gebeurtenissen. Roep vervolgens de gebeurtenishandler aan wanneer de gebruiker stopt met het verplaatsen van de schuifregelaar. Dit geeft consistente resultaten in alle browsers.

En het resultaat van het toepassen van de schuifregelaar in de code:

De volgende kenmerken zijn geïntroduceerd om met de schuifregelaar te werken:

max - de maximale waarde van het element (komt overeen met de uiterst rechtse positie van de schuifregelaar). Nummer.
min - de minimumwaarde van het element (komt overeen met de meest linkse positie van de schuifregelaar). Nummer.
stap - de stap van de schuifregelaar. Nummer.

Hieronder ziet u een voorbeeld van het gebruik van attributen.

Ook kunt u, zoals bij elk HTML-element, CSS-styling toepassen op invoertype = "bereik".

Hoe te werken met slider in JS

Aangezien de schuifregelaar een invoerelement is, kunt u de eigenschap value gebruiken om de waarde ervan te lezen. In het volgende voorbeeld lezen we de waarde van de schuifregelaar en voeren deze uit naar een alinea.

function fun1 () (var rng = document.getElementById ("r1"); // rng is Input var p = document.getElementById ("one"); // p is alinea p.innerHTML = rng.value;)

functie fun1 () (

var rng = document. getElementById (& # x27; r1 "); // rng is Input

var p = document. getElementById (& # x27; één "); // p - paragraaf

P. innerHTML = rng. waarde;

Let op de nieuwe oninput-gebeurtenis. De gebeurtenis OnInput wordt geactiveerd bij elke wijziging in een formulierelement, bijvoorbeeld wanneer een nieuw teken wordt ingevoerd of wanneer de schuifregelaar met 1px wordt verplaatst. In tegenstelling tot de OnChange-gebeurtenis - die alleen wordt geactiveerd wanneer het element de focus verliest, wordt oninput geactiveerd wanneer er een wijziging in het element is. Deze gebeurtenis voegt een schuifregelaar voor interactiviteit toe.

De gebeurtenis onchange is ook handig in combinatie met een select element.

praktische taak

Opdracht 1. Vervang in dit voorbeeld de gebeurtenis OnInput door de gebeurtenis onchange. Onderzoek hoe het gedrag van de elementen is veranderd. Wanneer vindt de waarde-update plaats in een alinea?

Taak 2. Zet de schuifregelaar op een minimumwaarde van 50 en een maximumwaarde van 150. Leren wat de minimum- en maximumwaarden worden weergegeven in een alinea?

Taak 3. Zet de schuifregelaar stap gelijk aan 10. Hoe is de verandering in waarden in een alinea?

Taak 4. Stel de stap in voor het wijzigen van de waarden gelijk aan 7. Hoe de maximum- en minimumwaarden wijzigen?

We blijven werken met de bereikschuifregelaar

Aandacht! De waarden die uit de value-eigenschap worden gelezen, zijn strings. Vergeet niet om ze naar getallen te converteren met de functie parseInt (uw string).

Laten we een eenvoudig probleem oplossen: print de waarde van de schuifregelaar in invoer. Om dit te doen, moet u de waarde van de eigenschap slider.value doorgeven aan de eigenschap input.value. Een voorbeeld is hieronder weergegeven:

function fun1 () (var rng = document.getElementById ("r1"); // rng is een schuifregelaar var i1 = document.getElementById ("i1"); // i1 - invoer i1.value = rng.value;)

praktische taak

Opdracht 5. Bestudeer het werk van het bovenstaande voorbeeld. Voeg een oninput = "fun2 ()" gebeurtenis toe aan het invoertype = "text". Programmeer voor de fun2-functie het inverse probleem - de waarden die in invoer worden ingevoerd, worden automatisch toegewezen aan de schuifregelaar.

Laten we nog één ding doen om te verankeren: gebruik de schuifregelaar om de grootte van de div te wijzigen. De lay-out van het probleem wordt hieronder weergegeven:

Bij het ontwerpen van een winkel staat u vaak voor de taak om een gebruiksvriendelijke prijsklasse te kiezen. Het kan er bijvoorbeeld zo uitzien:

Het idee is, hoop ik, duidelijk. Sleep de schuifregelaars, de veldwaarden veranderen synchroon. Laten we proberen het te implementeren.

Taak

Vind cross-browser js-oplossing voor bereikselectie-interface. Vereisten:

ingangen en schuifregelaars zijn gekoppeld (het wijzigen van de waarde van sommige wordt onmiddellijk weerspiegeld in andere);
flexibiliteit van styling (alles moet er qua ontwerp uitzien).

Oplossing

We zullen de jQuery UI Slider-plug-in gebruiken. Op zichzelf creëert het gewoon een schuifregelaar, maar het zal niet moeilijk zijn om vrienden te maken met invoer.

Ingecheckt:

IE 6-8
Firefox 4
Opera 11
Safari
Chroom

Laten we dus eerst doen alsof er geen invoer is en kijken hoe de plug-in zelf werkt.

Wat te downloaden?

(24.33 Kb) UI-kern + de schuifregelaar zelf.

Snelle start

Wij verbinden bibliotheken:

We initialiseren de slider met een script:

En nu in meer detail

De plug-in is flexibel genoeg. Hiermee kunt u verticale of horizontale sporen maken waarop een of twee schuifregelaars kunnen lopen. De optie met twee schuifregelaars is perfect voor onze taak om een assortiment te kiezen.

Op het moment dat u de schuifregelaar verplaatst of stopt, kunt u een functie uitvoeren, waardoor de schuifregelaar als besturingselement kan worden gebruikt (wijzig de waarden van ingangen, selecties of bijvoorbeeld van tabblad wisselen - er is zoiets een demovoorbeeld op de officiële website van de plug-in).

Instellingen

Wanneer u een plug-in initialiseert, kunt u de parameters ervan instellen:

Parameternaam	Beschrijving	Data type	Standaardwaarde
gehandicapt	Schakelt de schuifregelaar uit (true) of in (false).	booleaans	vals
animeren	Bepaalt of de schuifregelaar soepel naar een punt wordt verplaatst wanneer de gebruiker op een punt op de strip klikt. Het kan ook een tekenreekswaarde zijn die een van de drie snelheden vertegenwoordigt waaruit u kunt kiezen ("langzaam", "normaal" of "snel") of een aantal milliseconden dat de duur van de animatie aangeeft (bijvoorbeeld 1000).	booleaans, string, int	vals
max	De maximale waarde van de schuifregelaar.	Nummer	100
min	De minimumwaarde van de schuifregelaar.	Nummer	0
oriëntatie	Bepaalt of de schaal van links naar rechts of van onder naar boven wordt georiënteerd. Mogelijke waarden: "horizontaal", "verticaal".	Snaar	horizontaal
bereik	Indien ingesteld op waar, heeft de schuifregelaar twee schuifbalken en een bereik daartussen dat kan worden gestileerd. De andere twee waarden zijn "min" en "max". De "min"-waarde creëert een bereik van het minimum van de schaal tot de schuifregelaar. De "max"-waarde creëert een bereik van de schuifregelaar tot het maximum van de schaal.	booleaans, string	vals
stap	Bepaalt de stap van de schuifregelaar. Het volledige schaalbereik (max - min) moet gelijkmatig worden gedeeld door de stap.	Nummer	1
waarde	Bepaalt de waarde van de schuifregelaar als er slechts één schuifregelaar is. Als er meer dan één schuifregelaar is, bepaalt dit de waarde van de eerste schuifregelaar.	Nummer	0
waarden	Deze optie kan worden gebruikt om meerdere schuifregelaars op te geven. Als bereik waar is, moeten "waarden" 2 zijn.	Array	nul

ontwikkelingen

Gebeurtenissen zijn functies die op specifieke punten in het leven van de schuifregelaar worden uitgevoerd. U kunt ze tijdens de initialisatie instellen. Bijvoorbeeld:

JQuery ("# slider"). Slider ((stop: function (event, ui) (alert ("De slider is verplaatst naar een nieuwe positie!");)));

Lijst met evenementen:

creëren	De gebeurtenis vindt plaats wanneer de schuifregelaar wordt gemaakt
begin	De gebeurtenis vindt plaats wanneer de gebruiker de schuifregelaar begint te verplaatsen.
dia	De gebeurtenis vindt plaats elke keer dat de muis wordt verplaatst tijdens het scrollen. Gebruik ui.value (enkele schuifregelaars) om de huidige schuifregelaarwaarde te krijgen, $ (..) Schuifregelaar ("waarde", index) om de schuifregelaarwaarde te krijgen voor schuifregelaars met meerdere schuifregelaars.
verandering	De gebeurtenis treedt op wanneer het scrollen stopt of als de waarde programmatisch wordt gewijzigd (via de waardemethode). Accepteert event- en ui-argumenten. Gebruik event.orginalEvent om te bepalen of een waarde is gewijzigd met de muis, het toetsenbord of programmatisch. Gebruik ui.value (enkele schuifregelaars) om de huidige schuifregelaarwaarde te krijgen, $ (this) .slider ("waarden", index) om de schuifregelaarwaarde te krijgen voor schuifregelaars met meerdere schuifregelaars.
stop	De gebeurtenis vindt plaats wanneer de gebruiker klaar is met het verplaatsen van de schuifregelaar.

Methoden:

Door deze functies aan te roepen, kunt u de werking van de schuifregelaar beïnvloeden door de parameters direct te wijzigen. Dit wordt gedaan met behulp van de constructie.slider (), bijvoorbeeld als volgt:

JQuery ("#-schuifregelaar"). Schuifregelaar ("waarden", 0, 100);

Lijst met methoden:

kapot maken	Verwijdert de functionaliteit van de schuifregelaar en brengt het element terug in de oorspronkelijke staat.
uitzetten	Schakelt de schuifregelaar uit.
inschakelen	Inclusief een schuifregelaar.
optie	Krijgt of stelt een schuifregelaar in. Als er geen waarde is opgegeven, fungeert deze als de ontvanger. Syntaxis: .slider ("optie", optieNaam,)
optie	Stelt meerdere schuifregelaaropties tegelijk in door objectopties te bieden. Syntaxis: .slider ("optie", opties)
widget	Retourneert het element ui-schuifregelaar.
waarde	Stelt de waarde van de schuifregelaar in of geeft deze terug. Voor sliders met één slider.
waarden	Stelt de waarde van de schuifregelaar in of geeft deze terug. Voor sliders met meerdere sliders of met een bereik.

Stijlen aanpassen

In feite worden jQuery UI-elementen (waarvan één deze slider is) gestyled door het thema te kiezen dat je leuk vindt en de voltooide CSS te downloaden van de officiële site. Persoonlijk past deze aanpak helemaal niet bij mij. Daarom heb ik uit hun (zeer overbodige, als je alleen de slider gebruikt) CSS alleen de benodigde code gekozen, die ik hier met commentaar breng.

/ * Slider width * / #slider (breedte: 200px;) / * Slider container * / .ui-slider (positie: relatief;) / * Slider * / .ui-slider .ui-slider-handle (positie: absoluut; z-index: 2; width: 13px; / * Stel de gewenste breedte in * / height: 13px; / * en height * / background: url (../img / slider.png) no-repeat; / * een afbeelding die of u kunt vullen met kleur, de rand en de filets instellen * / cursor: pointer) .ui-slider .ui-slider-range (positie: absoluut; z-index: 1; lettergrootte: .7em; weergave : block; border: 0 ; overflow: hidden ;) / * horizontale schuifregelaar (dezelfde strook waarlangs de schuifregelaar loopt) * / .ui-slider-horizontal (hoogte: 3px; / * stel de hoogte in volgens het ontwerp * / ) / * plaats de schuifregelaars * / .ui-slider -horizontal .ui-slider-handle (top: -5px; margin-left: -6px;) .ui-slider-horizontal .ui-slider-range (top: 0 ; hoogte: 100%;) .ui-slider-horizontaal .ui-slider-range-min (links: 0;) .ui-slider-horizontal .ui-slider-range-max (rechts: 0;) / * decoratie vloer wesp waarop de schuifregelaar beweegt * / .ui-widget-content (rand: 1px solide # D4D4D4; achtergrond: #fff; ) / * decoratie van het actieve gebied (tussen de twee schuifregelaars) * / .ui-widget-header (rand: 1px effen # D4D4D4; achtergrond: # f00;) / * afronding voor de schuifbalk * / .ui-corner- alle (-moz -border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;)

Sommige van deze regels kunnen worden gecombineerd, omdat de plug-in elementen genereus beloont met meerdere klassen. Bijvoorbeeld mijn originele

verandert in

Maar ik gaf er de voorkeur aan de stijlen te laten zoals ze zijn voor meer veelzijdigheid. Ik denk dat iedereen die de verticale schuifregelaar moet stylen met behulp van deze sjabloon, me zal bedanken.

Gerelateerde ingangen toevoegen

Nu komt het leuke gedeelte. Laten we twee invoer toevoegen waarin we de waarden weergeven die op de schuifregelaar zijn geselecteerd.

Bij het initialiseren van de schuifregelaar gebruiken we de stop- en schuifgebeurtenissen - de eerste geeft de juiste waarde op het moment dat de schuifregelaar stopt en de tweede geeft interactiviteit (de invoerwaarde verandert in realtime, synchroon met de beweging van de schuifregelaar ).

De code van beide gebeurtenissen is hetzelfde - we nemen de huidige waarde met behulp van de methode.slider ("values", X) en plaatsen deze in de vereiste invoer:

JQuery ("# slider"). Slider ((min: 0, max: 1000, values:, range: true, stop: function (event, ui) (jQuery ("input # minCost"). Val (jQuery ( "# slider "). slider ("values", 0)); jQuery (" input # maxCost "). val (jQuery (" # slider"). slider ("values", 1));) , slide: function (event , ui) (jQuery ("invoer # minCost"). val (jQuery ("# slider"). slider ("values", 0)); jQuery ("invoer # maxCost"). val (jQuery ("# slider") .slider ("values", 1));)));

Het blijft om feedback te organiseren. We leren de schuifregelaar te bewegen als de gebruiker een waarde invoert in de invoer. Hier kunt u de toetsaanslaggebeurtenis gebruiken om de schuifregelaar te laten reageren op elke ingedrukte toets of wijzigingsgebeurtenis als u wilt dat de wijziging van kracht wordt nadat de invoer is voltooid en het veld het veld verlaat. Een kwestie van smaak.

Tegelijkertijd heb ik een vinkje ingevoegd voor de bovenste waarde die buiten het bereik ligt (ik heb het 1000) en een vinkje zodat de onderste schuifregelaar geen waarde krijgt die groter is dan de bovenste:

JQuery ("invoer # minCost"). Wijzigen (functie () (var value1 = jQuery ("invoer # minCost"). Val (); var value2 = jQuery ("invoer # maxCost"). Val (); if (parseInt (value1)> parseInt (value2)) (value1 = value2; jQuery ("invoer # minCost"). val (value1);) jQuery ("# slider"). slider ("values", 0, value1); )) ; jQuery ("invoer # maxCost"). change (functie () (var value1 = jQuery ("invoer # minCost"). val (); var value2 = jQuery ("invoer # maxCost"). val (); if (value2 > 1000) (value2 = 1000; jQuery ("invoer # maxCost"). Val (1000)) if (parseInt (value1)> parseInt (value2)) (value2 = value1; jQuery ("invoer # maxCost"). Val ( value2);) jQuery ("# slider"). slider ("values", 1, value2);));

Het laatste detail is om ervoor te zorgen dat de gebruiker de plug-in niet kan breken door letters of onjuiste numerieke waarden in de invoer in te voeren. Ik ga hier niet in detail op in, omdat het niet direct betrekking heeft op het onderwerp van het artikel. Ik verwijs de nieuwsgierigen naar waar dit natuurlijk wordt geïmplementeerd.

In een van de volgende publicaties zullen we de taak ingewikkelder maken. Ik zal u laten zien hoe u op basis van deze beslissing een waarde kunt selecteren met een ongelijke stap en een andere schaal. Dat wil zeggen, wanneer het bijvoorbeeld vereist is dat de eerste helft van de schuifregelaar een bereik van waarden heeft van 0 tot 100, en de tweede van 100 tot 1000.

Dergelijke opties zijn vrij vaak te vinden in online winkels - dit is handig, omdat bij kleine bedragen het maken belangrijker is en het gebruiksgemak, zoals u weet, boven alles staat.

De schuifregelaar is voor het invoeren van getallen in het opgegeven bereik, maar in tegenstelling tot het veld heeft een andere interface en wordt gebruikt in gevallen waarin het niet bijzonder belangrijk is om de exacte waarde op te geven. In afb. 1 toont de weergave van de schuifregelaar in verschillende browsers.

Rijst. 1. Weergave van de schuifregelaar in browsers

De syntaxis voor het maken van een schuifregelaar is als volgt.

Hier is min het minimum aantal in het bereik (standaard 0), max is het maximum aantal (standaard 100), stap is de stap van het wijzigen van de getallen (standaard 1), waarde is de huidige waarde. Standaard wordt de waarde berekend met de formule:

Als max kleiner is dan min, dan is de waarde min.

Attributen zijn optioneel, ze kunnen worden weggelaten, in welk geval ze hun standaardwaarden accepteren.

Ongeacht het minimum en maximum aantal blijft de breedte van de schuifregelaar hetzelfde.

De sliders zelf worden zelden gebruikt in een "pure" vorm, omdat ze niet de nodige feedback geven aan de gebruiker, maar in combinatie met JavaScript wordt dit een krachtig en handig interface-element. In voorbeeld 1 verandert de schuifregelaar de grootte van de afbeelding; deze functie wordt vaak gebruikt in verschillende fotogalerijen.

Voorbeeld 1. Een schuifregelaar gebruiken

HTML5 IE 10 Cr Op Sa Fx

Schuifregelaar

foto grootte:

In dit voorbeeld wordt bij het besturen van de schuifregelaar de gebeurtenis oninput geactiveerd, die de functie sizePic aanroept. Met deze functie wordt het formaat van de afbeelding aangepast op basis van de waarde van de schuifregelaar die door de gebruiker is ingesteld. Zo wordt de breedte van het beeld desgewenst kleiner of juist groter. Het resultaat van het voorbeeld met de extreme waarde van de schuifregelaar in de Chrome-browser wordt getoond in Fig. 2.

Rijst. 2. De breedte van de afbeelding regelen met de schuifregelaar

Oudere browsers die de bereikwaarde voor het kenmerk type niet ondersteunen, geven het formulierveld weer als tekst.