CODEWITHSUNDEEP
cssamp-htmlaccelerated-mobile-pagegoogle-amp
yajiv
yajiv

Reputation: 2941

How to apply dynamic style to AMP page?

Currently we have in our web site we have one slider as following.

1 2

As we can see that position of pointer(arrow of asking price) is changed based on Fair Condition, Good Condition and Asking Price value. This value comes through api and then we bind it here using javascript. And we calculate position of pointer(arrow of asking price) using some function and then using left we will set position.

e.g. For first image value for style attribute of tag which is showing pointer is left: 85% and image value for style attribute of tag which is showing pointer is left: 40%

Now problem is when we are converting this page to AMP, we are not able to set position of pointer based on api response.

The one possible way is create 100 class of something like this 

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

And according response from api we can add this class to div(which is showing pointer) using amp-bind. But it is not right way.

Is there any other way we can accomplish this in amp?

Upvotes: 1

Views: 1362

Answers (2)

Bachcha Singh
Bachcha Singh

Reputation: 3934

Use UI Components > Form Elements > Range Input 

<input type="range" min="1" max="100" value="20" class="slider" id="myRange">

Change the value on input with 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">

Upvotes: 2

abielita
abielita

Reputation: 13469

You may follow this page on how to add several dynamic CSS class names onto the <body> element of AMP pages. The AMP Dynamic CSS Classes extension adds the amp-referrer-* and amp-viewer CSS classes onto the element. Check this AMP By Example's amp-dynamic-css-classes example. Be noted that AMP's dynamic CSS classes provided by the amp-dynamic-css-class tag enable boolean logic for a handful of conditions

Upvotes: 0

Related Questions