css - 如何将动态样式应用于 AMP 页面？

Question

目前我们的网站上有一个 slider ，如下所示。

正如我们所见，指针(要价箭头)的位置根据Fair Condition、Good Condition 和 Asing Price 值而变化。这个值是通过 api 来的，然后我们使用 javascript 在这里绑定(bind)它。我们使用一些函数计算指针(要价箭头)的位置，然后使用 left 我们将设置位置。

例如对于显示指针的标签的样式属性的第一个图像值为 left: 85% 并且显示指针的标签的样式属性的图像值为 left: 40%

现在的问题是，当我们将此页面转换为 AMP 时，我们无法根据 api 响应设置指针的位置。

一种可能的方法是创建 100 个这样的类

.left-21{left: 21%}
.left-51{left: 51%}

根据 api 的响应，我们可以使用 amp-bind 将此类添加到 div(显示指针)。但这不是正确的方法。

有没有其他方法可以在 amp 中实现这一点？

Answer 1

使用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">