创建一个垂直滑块HTML元素 [英] Creating a vertical slider HTML element

问题描述

我试图创建自己的HTML元素，如下所示：

我要创建的外观：
我的尝试：

这个小部件只适用于iPad版本的网站&我不能不幸地使用JQuery。

我的问题：我正在尝试添加一个滑块/箭头到小部件，但我不知道如何？有没有一个webkit外观上有一个箭头滑块？我的代码：

 <$> $ {
 $ b $ p $} c $ c>< div style =background-color：rgb（191，326，383）; width：200px;> 
 
< li> jddsjh  - < / li> 
< li> jddsjh  - < / li> 
< li> jddsjh  - < / li> 
< li> jddsjh  - < / li> 
< / ul> 
< / div> 
  

解决方案

  input [type =range] {position：absolute; -webkit-transform：旋转（90deg）;顶：100px的; }  

< input type =range>

I am trying to create my own HTML element that looks like this:

The look I want to create: My attempt:

The widget is only for a iPad version of the website & I cannot unfortunately use JQuery.

My problem: I am trying to add a slider/arrow to the widget but I dont know how? Is there a webkit appearance that has an arrow slider on it? Is it possible to have a slider arrow on the widget?

My code:

<div style="background-color: rgb(191, 326, 383); width: 200px;">
    <ul style="list-style: none; -webkit-appearance: slider-vertical; width: 200px; height: 300px; margin: 0;">
        <li>jddsjh -</li>
        <li>jddsjh -</li>
        <li>jddsjh -</li>
        <li>jddsjh -</li>
    </ul>
</div>

解决方案

input[type="range"] {
    position:absolute;
    -webkit-transform: rotate(90deg);
    top:100px;
   
}

<input type="range">

这篇关于创建一个垂直滑块HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！