diff --git a/features/portfolio_search_range.feature b/features/portfolio_search_range.feature
new file mode 100644
index 00000000..d4f501a8
--- /dev/null
+++ b/features/portfolio_search_range.feature
@@ -0,0 +1,18 @@
+#language: fr
+
+Fonctionnalité: Rechercher des items à partir d'une plage de valeurs d'un attribut
+
+Scénario: numérique
+
+    Soit "vitraux" le portfolio ouvert
+    Et "slider" le paramètre appliqué à l'attribut "created"
+    Et "SNZ 009" un des items affichés
+    Et "SR 005" un des items affichés
+    Et "SJ 000" un des items affichés
+    Et "AXN 009" un des items affichés
+    Quand l'utilisateur sélectionne un intervalle entre "2015" et "2016" pour l'attribut "created"
+    Alors l'item "SR 005" est affiché
+    Et l'item "SJ 000" est affiché
+    Mais l'item "SNZ 009" est caché
+    Et l'item "AXN 009" est caché
+
diff --git a/features/step_definitions/context.rb b/features/step_definitions/context.rb
index 30751f02..ed665925 100644
--- a/features/step_definitions/context.rb
+++ b/features/step_definitions/context.rb
@@ -93,3 +93,7 @@
   find('input[type="search"]').send_keys topic
   click_link(topic, href: nil)
 end
+
+Soit("{string} le paramètre appliqué à l'attribut {string}") do |setting, attribute|
+  find('.AttributeList ' + attribute).to have_css("." + setting)
+end
diff --git a/features/step_definitions/event.rb b/features/step_definitions/event.rb
index 9431bc92..470e9ef9 100644
--- a/features/step_definitions/event.rb
+++ b/features/step_definitions/event.rb
@@ -123,3 +123,10 @@
   end
 end
 
+Quand("l'utilisateur sélectionne un intervalle entre {int} et {int} pour l'attribut {string}") do |min, max, attribute|
+  within '.' + attribute do
+    find_all('input[type="range"]')[0].set(min)
+    find_all('input[type="range"]')[1].set(max)
+  end
+end
+
diff --git a/public/config.yml b/public/config.yml
index 21c1ad47..574a4867 100644
--- a/public/config.yml
+++ b/public/config.yml
@@ -9,3 +9,6 @@ services:
 portfolio:
   vitraux:
     visitMap: true
+  dessins:
+    slider:
+     - année
\ No newline at end of file
diff --git a/src/Selection.js b/src/Selection.js
index efb2a4be..52e2fde8 100644
--- a/src/Selection.js
+++ b/src/Selection.js
@@ -125,6 +125,22 @@ export default class Selection {
     }
   }
 
+  addTopicArray = (arrayAttributes) => {
+    const data = this.selectionJSON.data;
+    try {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].selection[0].includes(':')) {
+          if (data[i].selection[0].split(':')[0] === arrayAttributes[0].split(':')[0]) {
+            data.splice(i, 1);
+          }
+        }
+      }
+      this.selectionJSON.data.push({type: 'union', selection: arrayAttributes, exclusion: []});
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   /**
    * Remove topic from selection.
    *
diff --git a/src/components/portfolioPage/AttributeSearch.jsx b/src/components/portfolioPage/AttributeSearch.jsx
index 1ace8aa9..ef9ee3bc 100644
--- a/src/components/portfolioPage/AttributeSearch.jsx
+++ b/src/components/portfolioPage/AttributeSearch.jsx
@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import { Items } from '../../model.js';
 import Selection from '../../Selection.js';
 import { withRouter } from 'react-router-dom';
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+import conf from '../../config.js';
 
 class AttributeSearch extends Component {
   constructor(props) {
@@ -9,32 +12,125 @@ class AttributeSearch extends Component {
     this.handleChange = this.handleChange.bind(this);
     this.state = {
       selectedValue: '',
+      slider: [],
+      value: [2010, 2021],
+      min: 2010,
+      max: 2021,
     };
+    conf.then(settings => {
+      if (settings.portfolio && settings.portfolio[settings.user])
+        this.setState({
+          slider: settings.portfolio[settings.user].slider || false,
+        });
+    }).then(valeur => {
+      if (this.state.slider.includes(this.props.name)) {
+
+        let dates = new Set();
+        this._getValues().forEach(value => {
+          dates.add((parseInt(value.substring(0, 4)) || 0));
+        });
+        this.setState({min: Math.min(...dates)});
+        var today = new Date();
+        this.setState({max: today.getFullYear()});
+        this.setState({value: [this.state.min, this.state.max]});
+      }
+    }
+    );
   }
+
   render() {
     let attributeValues = this._getValues();
     let options = this._getOptions(attributeValues);
     let handleChange = (e) => {
       const selection = Selection.fromURI();
-      if (e.target.value !== '') {
-        if (this.state.selectedValue !== '') {
+      console.log(selection.selectionJSON);
+      if (!this.state.slider.includes(this.props.name)) {
+        if (e.target.value !== '') {
+          if (this.state.selectedValue !== '') {
+            selection.removeTopic(this.state.selectedValue);
+          }
+          selection.addTopic(e.target.value);
+        } else {
           selection.removeTopic(this.state.selectedValue);
         }
-        selection.addTopic(e.target.value);
+        console.log(selection.toURI());
+        this.props.history.push(selection.toURI());
+        this.setState({selectedValue: e.target.value});
       } else {
-        selection.removeTopic(this.state.selectedValue);
+        console.log(selection.toURI());
+
       }
-      console.log(selection.toURI());
-      this.props.history.push(selection.toURI());
-      this.setState({selectedValue: e.target.value});
     };
+
     return (
       <div className={'AttributesList ' + this.props.name}>
         {this.props.name}
-        <select id={this.props.name} onChange={handleChange} className="selectValue">
-          <option value="" />
-          {options}
-        </select>
+        {(this.state.slider.includes(this.props.name))
+          ? ' : ' + this.state.value[0] + ' - ' + this.state.value[1]
+          : null
+        }
+        {(this.state.slider.includes(this.props.name)
+          ? <div>
+            <div>{}</div>
+            <div>{}</div>
+            <Slider
+              range
+              min={this.state.min}
+              max={this.state.max}
+              value={this.state.value}
+              count={1}
+              onChange={value => {
+                this.setState(
+                  {
+                    value
+                  },
+                );
+                let todelete = [];
+                const selection = Selection.fromURI();
+                selection.selectionJSON.data.forEach((element) => {
+                  if (element.selection[0] && element.selection[0].includes(this.props.name)) {
+                    todelete.push(element.selection[0]);
+                  }
+                  if (element.exclusion[0] && element.exclusion[0].includes(this.props.name)) {
+                    todelete.push(element.exclusion[0]);
+                  }
+                });
+                for (const item of todelete) {
+                  selection.removeTopic(item);
+                }
+                let values = this._getValues();
+                let valuesParsed = [];
+                let realValues = [];
+
+                for (let value of values) {
+                  valuesParsed.push(parseInt(value));
+                }
+                for (let i = this.state.value[0]; i <= this.state.value[1]; i++) {
+                  if (valuesParsed.includes(i)) {
+                    realValues.push(this.props.name + ' : ' + valuesParsed[valuesParsed.indexOf(i)]);
+                  }
+                }
+                selection.addTopicArray(realValues);
+                this.props.history.push(selection.toURI());
+              }}
+              railStyle={{
+                height: 4,
+              }}
+              handleStyle={{
+                height: 10,
+                width: 10,
+                marginLeft: -5,
+                marginTop: -3,
+                backgroundColor: 'blue',
+                border: 0
+              }}
+            />
+          </div>
+          : <select id={this.props.name} onChange={handleChange} className="selectValue">
+            <option value="">Choisir</option>
+            {options}
+          </select>)
+        }
       </div>
     );
   }