{"html":"

Price Range

$735

-\n

$6 465

\n \n Current Range:\n

$7 200

\n \n

\n 1\n 10 000\n

\n \n \n

","css":".card-conteiner {\n cursor: default;\n --color-primary: #275efe;\n --color-headline: #3f4656;\n --color-text: #99a3ba;\n}\n\n.card-content {\n width: 100%;\n max-width: 312px;\n padding: 36px 32px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 1px 4px rgba(18, 22, 33, .12);\n}\n\n.card-content .card-title {\n font-family: inherit;\n font-size: 32px;\n font-weight: 700;\n margin: 0 0 10px 0;\n color: var(--color-headline);\n}\n\n.card-content .card-title span {\n font-weight: 500;\n}\n\n.card-content .values div, .card-content .current-range div {\n display: inline-block;\n vertical-align: top;\n}\n\n.card-content .values {\n margin: 0;\n font-weight: 500;\n color: var(--color-primary);\n}\n\n.card-content .values > div:first-child {\n margin-right: 2px;\n}\n\n.card-content .values > div:last-child {\n margin-left: 2px;\n}\n\n.card-content .current-range {\n display: block;\n color: var(--color-text);\n margin-top: 8px;\n font-size: 14px;\n}\n\n.card-content .slider {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n font-size: .6em;\n color: var(--color-text);\n}\n\n/* Range Slider */\n.input-ranges[type='range'] {\n width: 210px;\n height: 30px;\n overflow: hidden;\n outline: none;\n}\n\n.input-ranges[type='range'],\n.input-ranges[type='range']::-webkit-slider-runnable-track,\n.input-ranges[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n background: none;\n}\n\n.input-ranges[type='range']::-webkit-slider-runnable-track {\n width: 200px;\n height: 1px;\n background: var(--color-headline);\n}\n\n.input-ranges[type='range']:nth-child(2)::-webkit-slider-runnable-track {\n background: none;\n}\n\n.input-ranges[type='range']::-webkit-slider-thumb {\n position: relative;\n height: 15px;\n width: 15px;\n margin-top: -7px;\n background: #fff;\n border: 1px solid var(--color-headline);\n border-radius: 25px;\n cursor: pointer;\n z-index: 1;\n transition: .5s;\n -webkit-transition: .5s;\n -moz-transition: .5s;\n -ms-transition: .5s;\n -o-transition: .5s;\n}\n\n.input-ranges[type='range']::-webkit-slider-thumb:hover {\n background: #eaefff;\n border: 1px solid var(--color-primary);\n outline: .5px solid var(--color-primary);\n}\n\n.input-ranges[type='range']::-webkit-slider-thumb:active {\n cursor: grabbing;\n}\n\n.input-ranges[type='range']:nth-child(1)::-webkit-slider-thumb {\n z-index: 2;\n}\n\n.rangeslider {\n font-family: sans-serif;\n font-size: 14px;\n position: relative;\n height: 20px;\n width: 210px;\n display: inline-block;\n margin-top: -5px;\n}\n\n.rangeslider input {\n position: absolute;\n}\n\n.rangeslider span {\n position: absolute;\n margin-top: 20px;\n left: 0;\n}\n\n.rangeslider .right {\n position: relative;\n float: right;\n margin-right: -5px;\n}"}

itchy-octopus-9

👁 实时预览

📝 源代码