Mobile UI Components library built on Vue 3 with 100+ components
74
{
"context": "This criteria evaluates how effectively the engineer uses the Vant Slider component to implement a dual-handle price range filter. The focus is on proper usage of the Slider API including range mode, value binding, step configuration, and mark display.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Slider component import",
"description": "Correctly imports the Slider component from Vant (van-slider or Slider from 'vant')",
"max_score": 10
},
{
"name": "Range mode enabled",
"description": "Uses the Slider component in range mode (dual-handle) by binding v-model to an array with two values [min, max] or using the range prop",
"max_score": 25
},
{
"name": "Min/max configuration",
"description": "Correctly sets the min and max props on the Slider to define the valid range (0 to 1000)",
"max_score": 15
},
{
"name": "Step increments",
"description": "Configures the step prop to 10 to ensure values change in $10 increments",
"max_score": 15
},
{
"name": "Visual marks",
"description": "Uses the marks prop or bar-height/button-size props to display visual indicators at specified price points ($0, $250, $500, $750, $1000)",
"max_score": 20
},
{
"name": "Value reactivity",
"description": "Properly implements two-way binding with v-model or value/update:model-value to track and respond to slider changes",
"max_score": 10
},
{
"name": "Event handling",
"description": "Implements change event emission using @change or @update:model-value to notify parent component of range changes",
"max_score": 5
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-vantdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10