crowd-slider - Amazon SageMaker
AttributesHiérarchie des élémentsVoir aussi

crowd-slider

Barre avec curseur qui permet à l'employé de sélectionner une valeur de la plage en déplaçant le curseur. Le curseur est parfait pour régler des niveaux d'intensité, comme le volume, la luminosité ou la saturation de la couleur.

Consultez un exemple interactif d'un modèle HTML qui utilise cet élément HTML Crowd dans CodePen.

Voici un exemple de modèle d'enquête qui utilise l'élément <crowd-slider>. Copiez le code suivant et enregistrez-le dans un fichier avec l'extension .html. Ouvrez le fichier dans n'importe quel navigateur pour prévisualiser et interagir avec ce modèle. 


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
<crowd-instructions link-text="View instructions" link-type="button">
  <short-summary>
    <p>Provide a brief instruction here</p>
  </short-summary>

  <detailed-instructions>
    <h3>Provide more detailed instructions here</h3>
    <p>Include additional information</p>
  </detailed-instructions>

  <positive-example>
    <p>Provide an example of a good answer here</p>
    <p>Explain why it's a good answer</p>
  </positive-example>

  <negative-example>
    <p>Provide an example of a bad answer here</p>
    <p>Explain why it's a bad answer</p>
  </negative-example>
</crowd-instructions>

<div>
  <p>What is your favorite color for a bird?</p>
  <crowd-input name="favoriteColor" placeholder="example: pink" required></crowd-input>
</div>

<div>
  <p>Check this box if you like birds</p>
  <crowd-checkbox name="likeBirds" checked="true" required></crowd-checkbox>
</div>

<div>
  <p>On a scale of 1-10, how much do you like birds?</p>
  <crowd-slider name="howMuch" min="1" max="10" step="1" pin="true" required></crowd-slider>
</div>

<div>
  <p>Write a short essay describing your favorite bird</p>
  <crowd-text-area name="essay" rows="4" placeholder="Lorem ipsum..." required></crowd-text-area>
</div>
</crowd-form>

Attributes

Les attributs suivants sont pris en charge par cet élément.

disabled

Commutateur booléen qui, s'il est présent, affiche le curseur comme désactivé.

editable

Commutateur booléen qui, s'il est présent, affiche un bouton haut/bas qui peut servir à sélectionner la valeur.

La sélection de la valeur via le bouton haut/bas est une alternative au déplacement de la molette sur le curseur. Le curseur se déplacera de manière synchrone avec le réglage du bouton haut/bas.

max

Nombre qui spécifie la valeur maximale du curseur.

min

Nombre qui spécifie la valeur minimale du curseur.

nom

Chaîne utilisée pour identifier la réponse envoyée par l'employé. Cette valeur correspondra à une clé dans l'objet JSON qui spécifie la réponse.

pin

Commutateur booléen qui, s'il est présent, affiche la valeur actuelle au-dessus du curseur lorsque celui-ci est déplacé.

obligatoire

Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.

secondary-progress

Lorsqu'elle est utilisée avec un attribut CSS crowd-slider-secondary-color, la barre de progression est colorée au point représenté par secondary-progress. Par exemple, s'il s'agissait de représenter la progression d'une vidéo en streaming, value représenterait l'emplacement de l'utilisateur dans la ligne de temps de la vidéo. La valeur secondary-progress représenterait le moment sur la ligne de temps auquel la vidéo a été mise en mémoire tampon.

step

Nombre qui spécifie la différence entre les valeurs sélectionnables sur le curseur.

value

Ce préréglage devient la valeur par défaut si l'employé ne saisit rien.

Hiérarchie des éléments

Les éléments parents et enfants de cet élément sont les suivants :

  • Éléments parents: crowd-form

  • Éléments enfants : aucun

Voir aussi

Pour plus d’informations, consultez les rubriques suivantes.