目前我们在我们的网站上有一个滑块如下。
我们可以看到指针的位置（要价箭头）根据Fair Condition, Good Condition and Asking Price值改变。这个值来自api然后我们使用javascript绑定它。我们使用某个函数计算指针的位置（要价的箭头），然后使用left我们将设置位置。
例如对于显示指针的标签的样式属性的第一个图像值是left: 85%，并且显示指针的标签的样式属性的图像值是left: 40%
现在的问题是当我们将这个页面转换为AMP时，我们无法根据api响应设置指针的位置。
一种可能的方法是创建100类这样的东西
.left-21{left: 21%}
.left-51{left: 51%}
根据api的响应，我们可以使用amp-bind将此类添加到div（显示指针）。但这不是正确的方式。
有没有其他方法可以在放大器中完成这个？
使用UI Components > Form Elements > Range Input
<input type="range" min="1" max="100" value="20" class="slider" id="myRange">
使用AMP-BIND更改输入值
.slider {
max-width:273px;
-webkit-appearance: none;
width: 100%;
height: 25px;
background: url(https://s17.postimg.org/z9in37267/image.png) no-repeat 0px 10px;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 21px;
height: 31px;
background: url(https://s17.postimg.org/8og47pke7/image.png) no-repeat;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: url(https://s17.postimg.org/8og47pke7/image.png) no-repeat;
cursor: pointer;
}<input type="range" min="1" max="100" value="20" class="slider" id="myRange">你可以按照这个page关于如何在AMP页面的<body>元素上添加几个动态CSS类名。 AMP Dynamic CSS Classes扩展将amp-referrer-*和amp-viewer CSS类添加到元素上。检查这个AMP By Example的amp-dynamic-css-classes示例。请注意，amp-dynamic-css-class标记提供的AMP动态CSS类为少数条件启用布尔逻辑