কিভাবে উল্লম্বভাবে একটি পরিসীমা ইনপুট স্লাইডার প্রদর্শিত হবে

Question

আমি <input type="range" />উল্লম্বভাবে একটি স্লাইডার নিয়ন্ত্রণ প্রদর্শন করতে চাই । আমি কেবল ব্রাউজারগুলির সাথেই উদ্বিগ্ন যা রেঞ্জ স্লাইডার নিয়ন্ত্রণকে সমর্থন করে।

আমি কিছু মন্তব্য এবং রেফারেন্স পেয়েছি যা দেখে মনে হয় যে প্রস্থের চেয়ে বেশি উচ্চতা নির্ধারণের ফলে ব্রাউজারটি স্বয়ংক্রিয়ভাবে ওরিয়েন্টেশন পরিবর্তন করতে পারে তবে আমার পরীক্ষায় দেখা গেছে যে কেবল অপেরাতে কাজ করে যা অপেরাতে কাজ করত, তবে আর নয়। আমি কীভাবে কোনও এইচটিএমএল 5 রেঞ্জ স্লাইডারটিকে উল্লম্বভাবে ওরিয়েন্ট করতে পারি?

Answer 1

প্রথমে প্রস্থের চেয়ে উচ্চতা নির্ধারণ করুন। তত্ত্বগতভাবে, এটি আপনার কেবল প্রয়োজন। HTML5 স্পেক যতটা প্রস্তাব দেওয়া :

... সংযুক্ত আরব আমিরাত স্টাইল-শিট-নির্দিষ্ট উচ্চতা এবং প্রস্থের বৈশিষ্ট্যের অনুপাত থেকে নিয়ন্ত্রণের ওরিয়েন্টেশন নির্ধারণ করে।

অপেরা এটি এইভাবে প্রয়োগ করেছিল, তবে অপেরা এখন ওয়েবকিট ব্লিঙ্ক ব্যবহার করছে । আজকের হিসাবে, কোনও ব্রাউজার কেবল প্রস্থের চেয়েও বেশি উচ্চতার ভিত্তিতে উল্লম্ব স্লাইডার প্রয়োগ করে না।

নির্বিশেষে, ব্রাউজারগুলির মধ্যে লেআউটটি ডানদিকে পাওয়ার জন্য প্রস্থের চেয়ে বেশি উচ্চতা নির্ধারণ করা প্রয়োজন। বাম এবং ডান প্যাডিং প্রয়োগ করা লেআউট এবং অবস্থান নির্ধারণে সহায়তা করবে।

ক্রোমের জন্য, ব্যবহার করুন -webkit-appearance: slider-vertical।

আই আই এর জন্য, ব্যবহার করুন writing-mode: bt-lr।

ফায়ারফক্সের orient="vertical"জন্য, এইচটিএমএল-তে একটি বৈশিষ্ট্য যুক্ত করুন । আফসোস যে তারা এইভাবে এটি করেছে। ভিজ্যুয়াল শৈলীগুলি HTML এর মাধ্যমে নয়, CSS এর মাধ্যমে নিয়ন্ত্রণ করা উচিত be

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

---

অস্বীকৃতি:

এই সমাধানটি এখনও অপরিবর্তিত বা নির্বিঘ্ন সিএসএস বৈশিষ্ট্যগুলির বর্তমান ব্রাউজার বাস্তবায়নের উপর ভিত্তি করে। যদি আপনি এটি আপনার কোডটিতে ব্যবহারের উদ্দেশ্যে থাকেন তবে নতুন ব্রাউজার সংস্করণ প্রকাশিত হওয়ার সাথে সাথে ডাব্লু 3 সি সুপারিশ সম্পূর্ণ হওয়ার সাথে সাথে কোড অ্যাডজাস্টমেন্টগুলি তৈরি করতে প্রস্তুত থাকুন ।

এমডিএন-webkit-appearance ওয়েবে ব্যবহারের বিরুদ্ধে একটি স্পষ্ট সতর্কতা রয়েছে :

এই সম্পত্তিটি ওয়েব সাইটে ব্যবহার করবেন না : এটি কেবল অ-মানকই নয়, এর আচরণটি একটি ব্রাউজার থেকে অন্য ব্রাউজারে পরিবর্তিত হয়। এমনকি কীওয়ার্ডের noneবিভিন্ন ব্রাউজারে প্রতিটি ফর্ম উপাদানগুলির সাথে একই আচরণ হয় না এবং কিছু এটি একেবারেই সমর্থন করে না।

আইই ডকুমেন্টেশনে উল্লম্ব স্লাইডার ডেমো জন্য ক্যাপশন ভুলভাবে নির্দেশ করে যে প্রস্থের চেয়ে উচ্চতা নির্ধারণ করা উল্লম্বভাবে একটি সীমা স্লাইডার প্রদর্শন করবে, কিন্তু এটি কার্যকর হয় না । ইন কোড অধ্যায় , এটা স্পষ্টভাবে সেট উচ্চতা বা প্রস্থ, এবং এর পরিবর্তে ব্যবহার না writing-mode। writing-modeসম্পত্তি, ইন্টারনেট দ্বারা বাস্তবায়িত যেমন , খুব জোরালো হয়। দুঃখের বিষয়, এই লেখার মতো অনুমানের বর্তমান কার্য খসড়ায় সংজ্ঞায়িত মানগুলি অনেক বেশি সীমাবদ্ধ। আই.ই. এর ভবিষ্যতের সংস্করণগুলি bt-lrবর্তমানে প্রস্তাবিত vertical-lr(যার সমতুল্য হবে tb-lr) এর পক্ষে সমর্থন ছেড়ে দিলে স্লাইডারটি উল্টোদিকে প্রদর্শিত হবে। সম্ভবত, ভবিষ্যতের সংস্করণগুলি প্রসারিত করবেwriting-modeবিদ্যমান মানগুলির জন্য সমর্থন বাদ দেওয়ার পরিবর্তে নতুন মানগুলি গ্রহণ করতে। তবে, আপনি কী ব্যবহার করছেন তা জেনে রাখা ভাল।

Comments

দাবি অস্বীকার করার জন্য +1 -webkit-appearance- আমি এটি জানতাম না। এটি সবকিছু পরিবর্তন করে।

— রবিন উইনস্লো

IE তে টাইপ = "রেঞ্জ" সহ ইনপুট উপাদানটি প্রস্থ / উচ্চতা / প্রদর্শনের মানগুলির প্রতি খুব সংবেদনশীল। বুটস্ট্র্যাপ ব্যবহার করার সময় এই মানগুলির মধ্যে কিছু অসাবধানতার সাথে ওভাররাইট করা যেতে পারে (বিশেষত যদি আপনি উত্তর হিসাবে কম্বল সিএসএস ব্যবহার না করেন)। আমার উল্লম্ব রেঞ্জগুলির একটিতে আমি এই জাতীয় CSS ব্যবহার করি: .vers {-ms-Writing-mode: bt-lr; / * আইই /-ওয়েবেকিট-উপস্থিতি: স্লাইডার-উল্লম্ব; / ওয়েবকিট * / উচ্চতা: 210px; প্রস্থ: 20px! গুরুত্বপূর্ণ; প্যাডিং: 0 5px; প্রদর্শন: ইনলাইন-ব্লক! গুরুত্বপূর্ণ; }

— mp31415

আমি অবশ্যই ভক্ত নই !important। আপনার নির্বাচককে শক্তিশালী করা সর্বদা ভাল। ন্যায়বিচারের পরিবর্তে, এর .vertমতো কিছু ব্যবহার করুন input[type=range].vert।

— গিলি 3

Answer 2

আপনি সিএসএস ট্রান্সফর্মগুলির সাহায্যে এটি করতে পারেন, তবে ধারকের উচ্চতা / প্রস্থের সাথে সতর্ক থাকুন। এছাড়াও আপনি এটি নীচে অবস্থান প্রয়োজন হতে পারে:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

<input type="range"/>

---

বা 3 ডি রূপান্তর সমতুল্য:

input[type="range"] {
   transform: rotateZ(270deg);
}

আপনি যথাক্রমে অনুভূমিক বা উল্লম্ব জন্য 180deg বা 90deg এ সেট করে স্লাইডের দিক পরিবর্তন করতে এটি ব্যবহার করতে পারেন।

Comments

নোট করুন যে আপনি যদি উচ্চতর মানের সাথে উপরে যেতে চান এবং নীচের মানগুলি যে আপনি নীচে চলেছেন তবে আপনি এটি 270 করতে হবে। আপনার উত্তর সম্পাদনা করেছে।

— আগস্ট

আমি এই পদ্ধতির পছন্দ করি কারণ এটি কাস্টম সিএসএস স্টাইলিং সমর্থন করে। অন্যান্য পদ্ধতির সাথে, কাস্টম স্টাইলিং স্লাইডারটিকে মজাদার করে তোলে

— কিম টি

এটি সহজ তবে উজ্জ্বল

— ক্রিস্টোফার এম

অবস্থানের পরিবর্তে: নিখুঁত আপনি প্রদর্শনটি ব্যবহার করতে পারেন: ইনলাইন-ব্লক; রূপান্তর-উত্স সঙ্গে।

— ডেনিস গিফেলার 13

@ ডেনিসগিফেলার পজিশনটি নিখুঁতভাবে এই সমাধানের অংশ নয়, এটি উদাহরণের সঠিকভাবে প্রদর্শন করা এটি একটি সহজ উপায়। আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে পজিশনিংটি সম্পন্ন করার জন্য অনেকগুলি উপায় রয়েছে।

— ম্যাক্সপ্রেফার্টি

Answer 3

স্থিতিশীল অবস্থানে পরিবর্তন না করে নীচে দেখুন। এটি সাম্প্রতিক সমস্ত ব্রাউজারগুলিকেও সমর্থন করে।

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>

খুব পুরানো ব্রাউজারগুলির জন্য, আপনি সিএসএস স্যান্ডপেপার-sand-transform: rotate(10deg); থেকে ব্যবহার করতে পারেন

বা ব্যবহার

যেমন উপসর্গ নির্বাচক -ms-transform: rotate(270deg);IE9 জন্য

Comments

transform-origin: center left;স্লাইডারটি বাম-ন্যায়সঙ্গত না হয়ে কেন্দ্র-ন্যায়সঙ্গত হওয়ার মতো কিছু অন্তর্ভুক্ত করুন ।

— ড্রাগনলর্ড

Answer 4

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

সূত্র: http://twiggle-web-design.com / টিউটোরিয়ালস / কাস্টম- ভার্টিকাল- ইনপুট-Range-CSS3.html

Comments

উত্স লিঙ্কে বিভিন্ন স্টাইলের চিকিত্সা সহ বিভিন্ন স্লাইডার দেখানো ডেমো অন্তর্ভুক্ত রয়েছে।

— জোশ হাবদাস

Answer 5

এটা খুবই সাধারণ. আমি ব্যবহার করে বাস্তবায়ন করেছি -webkit-appearance: slider-vertical, এটি ক্রম, ফায়ারফক্স, এজ এ কাজ করেছিল

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}