{"id":1445,"date":"2021-02-09T10:13:25","date_gmt":"2021-02-09T10:13:25","guid":{"rendered":"http:\/\/dijitalturk.com\/veysel\/?p=1445"},"modified":"2021-02-09T10:16:05","modified_gmt":"2021-02-09T10:16:05","slug":"dereceli-secim-cubugu-choice-slider","status":"publish","type":"post","link":"https:\/\/dijitalturk.com\/veysel\/dereceli-secim-cubugu-choice-slider\/","title":{"rendered":"Dereceli se\u00e7im \u00e7ubu\u011fu – choice slider"},"content":{"rendered":"

Dereceli se\u00e7im \u00e7ubu\u011fu yap\u0131s\u0131n\u0131 kolay bir css yap\u0131land\u0131rmas\u0131 ile sa\u011flayabilirsiniz. A\u015fa\u011f\u0131da HTML – CSS kodlar\u0131n\u0131 ve \u00f6rnek \u00e7\u0131kt\u0131s\u0131n\u0131 payla\u015f\u0131yorum.<\/p>\n

<\/p>\n

De\u011fer aral\u0131klar\u0131n\u0131 otomatik olarak ayarlayacakt\u0131r ve mobil uyumludur(responsive)<\/p>\n


\n\"\"<\/a><\/p>\n

CSS Kodlar\u0131:<\/p>\n

input:focus{\r\n  outline: none;\r\n}\r\n.slider {\r\n  -webkit-appearance: none;\r\n  --range: calc(var(--max) - var(--min));\r\n  --ratio: calc((var(--val) - var(--min))\/var(--range));\r\n  --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em));\r\n  margin: 0;\r\n  padding: 0;\r\n  width: 100%;\r\n  height: 1.5em;\r\n  \/\/background: transparent;\r\n  background-image: linear-gradient(to right, white , green);\r\n  font: 1em\/1 arial, sans-serif;\r\n  border: none;\r\n}\r\n.slider, .slider::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n}\r\n.slider::-webkit-slider-runnable-track {\r\n  box-sizing: border-box;\r\n  border: none;\r\n  width: 12.5em;\r\n  height: 0.5em;\r\n  background-image: linear-gradient(to right, white , green);\r\n}\r\n.js .slider::-webkit-slider-runnable-track {\r\n  background: linear-gradient(#7b1c1a, #7b1c1a) 0\/var(--sx) 100% no-repeat #ccc;\r\n}\r\n.slider::-moz-range-track {\r\n  box-sizing: border-box;\r\n  border: none;\r\n  height: 0.5em;\r\n  background: #000000;\r\n}\r\n.slider::-ms-track {\r\n  box-sizing: border-box;\r\n  border: none;\r\n  width: 12.5em;\r\n  height: 0.5em;\r\n  background: #000000;\r\n}\r\n.slider::-moz-range-progress {\r\n  height: 0.5em;\r\n  background: #000;\r\n}\r\n.slider::-ms-fill-lower {\r\n  height: 0.5em;\r\n  background: #000;\r\n}\r\n.slider::-webkit-slider-thumb {\r\n  margin-top: -0.550em;\r\n  box-sizing: border-box;\r\n  border: none;\r\n  width: 10px;\r\n  height: 30px;\r\n  border-radius: 10%;\r\n  background: #000;\r\n}\r\n.slider::-moz-range-thumb {\r\n  box-sizing: border-box;\r\n  border: none;\r\n  width: 10px;\r\n  height: 30px;\r\n  border-radius: 10%;\r\n  background: #000;\r\n}\r\n.slider::-ms-thumb {\r\n  margin-top: 0;\r\n  box-sizing: border-box;\r\n  border: none;\r\n  width: 10px;\r\n  height: 30px;\r\n  border-radius: 10%;\r\n  background: #000;\r\n}\r\n.slider::-ms-tooltip {\r\n  display: none;\r\n}\r\n#tickmarks {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 0 10px;\r\n}\r\n\r\n#tickmarks p {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  text-align: center;\r\n  width: 1px;\r\n  background: #D3D3D3;\r\n  height: 10px;\r\n  line-height: 40px;\r\n  margin: 0 0 20px 0;\r\n}\r\n<\/pre>\n
 <\/p>\n
HTML kodlar\u0131:<\/p>\n
<div class=\"col-lg-4 d\">\r\n    <h3 class=\"baslik\">\r\n      Davran\u0131\u015fsal Ortalama\r\n    <\/h3>\r\n    <p class=\"score\">\r\n      {{::data.davranissalScore}}\r\n    <\/p>\r\n    <input type=\"range\" min=\"0\" max=\"5\" value=\"{{::data.davranissalScore}}\" class=\"slider gh-slider-option4\" id=\"davranissal\">\r\n    <div id=\"tickmarks\">\r\n      <p>N\/A<\/p>\r\n      <p>A<\/p>\r\n      <p>B<\/p>\r\n      <p>C<\/p>\r\n      <p>D<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Dereceli se\u00e7im \u00e7ubu\u011fu yap\u0131s\u0131n\u0131 kolay bir css yap\u0131land\u0131rmas\u0131 ile sa\u011flayabilirsiniz. A\u015fa\u011f\u0131da HTML – CSS kodlar\u0131n\u0131 ve \u00f6rnek \u00e7\u0131kt\u0131s\u0131n\u0131 payla\u015f\u0131yorum.<\/p>\n","protected":false},"author":1,"featured_media":1447,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2],"tags":[329,363],"class_list":["post-1445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-yazilim","tag-css","tag-html"],"uagb_featured_image_src":{"full":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css.png",1250,1363,false],"thumbnail":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css-150x150.png",150,150,true],"medium":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css-174x190.png",174,190,true],"medium_large":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css-768x837.png",768,837,true],"large":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css-348x380.png",348,380,true],"1536x1536":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css.png",1250,1363,false],"2048x2048":["https:\/\/dijitalturk.com\/veysel\/wp-content\/uploads\/2021\/02\/html_css.png",1250,1363,false]},"uagb_author_info":{"display_name":"VeYSeL","author_link":"https:\/\/dijitalturk.com\/veysel\/author\/veysel\/"},"uagb_comment_info":0,"uagb_excerpt":"Dereceli se\u00e7im \u00e7ubu\u011fu yap\u0131s\u0131n\u0131 kolay bir css yap\u0131land\u0131rmas\u0131 ile sa\u011flayabilirsiniz. A\u015fa\u011f\u0131da HTML – CSS kodlar\u0131n\u0131 ve \u00f6rnek \u00e7\u0131kt\u0131s\u0131n\u0131 payla\u015f\u0131yorum.","_links":{"self":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/posts\/1445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/comments?post=1445"}],"version-history":[{"count":0,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/posts\/1445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/media\/1447"}],"wp:attachment":[{"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/media?parent=1445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/categories?post=1445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dijitalturk.com\/veysel\/wp-json\/wp\/v2\/tags?post=1445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}