crowd-slider - アマゾン SageMaker

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

crowd-slider

ワーカーがつまみを動かすことによって値の範囲から値を選択できる、スライドノブ付きのバー。スライダーは、ボリューム、明るさ、彩度など、強度を表す設定に対して最適な選択肢となります。

この Crowd HTML 要素を使用する HTML テンプレートのインタラクティブな例については、「CodePen」を参照してください。

次に、<crowd-slider> 要素を使用するアンケートテンプレートの例を示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。

<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>

属性

次の属性が、この要素でサポートされています。

無効

ブールスイッチ。存在する場合、スライダーを無効なものとして表示します。

editable

ブールスイッチ。存在する場合、値を選択するために選択可能な上下のボタンを表示します。

上下のボタンで値を選択すると、スライダーのつまみを動かして値を選択する代わりになります。スライダーのつまみは、上下ボタンによる選択と同期的に移動します。

max

スライダーの最大値を指定する数値。

スライダーの最小値を指定する数値。

name

ワーカーによって送信された回答を識別するために使用される文字列。この値は、回答を指定する JSON オブジェクトのキーに一致します。

pin

ブールスイッチ。存在する場合、つまみの移動中につまみの上に現在の値を表示します。

必須

ブールスイッチ。存在する場合、ワーカーに入力を要求します。

secondary-progress

crowd-slider-secondary-color CSS 属性と共に使用した場合、進行状況バーは secondary-progress によって表された点まで色付けされます。例えば、これがストリーミングビデオの進行状況を表していた場合、value はビデオのタイムラインにおけるビューワーの位置を表します。secondary-progress 値は、ビデオがバッファリングされた、タイムライン上の点を表します。

step

スライダーで選択可能な値の間の差を指定する数値。

ワーカーが入力を提供しない場合にデフォルトとなるプリセット。

要素の階層

この要素には、以下の親および子要素があります。

以下の資料も参照してください。

詳細については、以下を参照してください。