crowd-slider - Amazon SageMaker

crowd-slider

A bar with a sliding knob that allows a worker to select a value from a range of values by moving the knob. The slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.

See an interactive example of an HTML template that uses this Crowd HTML Element in CodePen.

The following is an example of a survey template that uses the <crowd-slider> element. Copy the following code and save it in a file with the extension .html. Open the file in any browser to preview and interact with this template.

<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

The following attributes are supported by this element.

disabled

A Boolean switch that, if present, displays the slider as disabled.

editable

A Boolean switch that, if present, displays an up/down button that can be chosen to select the value.

Selecting the value via the up/down button is an alternative to selecting the value by moving the knob on the slider. The knob on the slider will move synchronously with the up/down button choices.

max

A number that specifies the maximum value on the slider.

min

A number that specifies the minimum value on the slider.

name

A string that is used to identify the answer submitted by the worker. This value will match a key in the JSON object that specifies the answer.

pin

A Boolean switch that, if present, displays the current value above the knob as the knob is moved.

required

A Boolean switch that, if present, requires the worker to provide input.

secondary-progress

When used with a crowd-slider-secondary-color CSS attribute, the progress bar is colored to the point represented by the secondary-progress. For example, if this was representing the progress on a streaming video, the value would represent where the viewer was in the video timeline. The secondary-progress value would represent the point on the timeline to which the video had buffered.

step

A number that specifies the difference between selectable values on the slider.

value

A preset that becomes the default if the worker does not provide input.

Element Hierarchy

This element has the following parent and child elements.

  • Parent elements: crowd-form

  • Child elements: none

See Also

For more information, see the following.